Text Image

Für Kombinationen aus Text und Bild gibt es verschiedene Möglichkeiten der Positionierung des Bildes. Nachfolgend sind alle Möglichkeiten aufgeführt, diese können nach eigenem ästhetischen Empfinden und Eignung für den Anwendungsfall genutzt werden.

For text and image combinations, there are various possibilities for positioning the image. All of these possibilities are listed below and should be used according to their suitability for the respective application. You can also go by your own aesthetic preferences to a certain extent here.

.modul-text_bild.imagealignleft

Alternative Bildbeschreibung

@copyright

Image left

Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

  • Listenpunkt
  • Listenpunkt
  1. Listenpunkt
  2. Listenpunkt

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

HTML
<div class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h2 class="title">Image left</h2>
    <div class="text textile">
            <p>Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</p>
            <ul>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ul>
            <ol>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ol>
            <p>Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
               
    </div>
    
</div>

.modul-text_bild.imagealignright

Alternative Bildbeschreibung

@copyright

Image right

Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

  • Listenpunkt
  • Listenpunkt
  1. Listenpunkt
  2. Listenpunkt

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

HTML
<div class="modul-text_bild imagealignright">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h2 class="title">Image right</h2>
    <div class="text textile">
            <p>Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</p>
            <ul>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ul>
            <ol>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ol>
            <p>Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
               
    </div>
    
</div>

.modul-text_bild.fifty

Alternative Bildbeschreibung

@copyright

Image 50% width

Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

  • Listenpunkt
  • Listenpunkt
  1. Listenpunkt
  2. Listenpunkt

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

HTML
<div class="modul-text_bild imagealignleft fifty">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h2 class="title">Image 50% width</h2>
    <div class="text textile">
            <p>Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</p>
            <ul>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ul>
            <ol>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ol>
            <p>Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
               
    </div>
    
</div>

.modul-text_bild.textbildbreit

Alternative Bildbeschreibung

@copyright

Image fullwidth (no stetching)

Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

  • Listenpunkt
  • Listenpunkt
  1. Listenpunkt
  2. Listenpunkt

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

HTML
<div class="modul-text_bild textbildbreit">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h2 class="title">Image fullwidth (no stetching)</h2>
    <div class="text textile">
            <p>Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</p>
            <ul>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ul>
            <ol>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ol>
            <p>Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
               
    </div>
    
</div>

.modul-text_bild.highlight

Highlight

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

HTML
<div class="modul-text_bild highlight">
    <h2 class="title">Highlight</h2>
    <div class="text textile">
            <p>Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>   
    </div>
    
</div>

.modul-text_bild.imagealignleft.nowrap

Alternative Bildbeschreibung

@copyright

Remove text floating

Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

  • Listenpunkt
  • Listenpunkt
  1. Listenpunkt
  2. Listenpunkt

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

HTML
<div class="modul-text_bild imagealignleft nowrap">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h2 class="title">Remove text floating</h2>
    <div class="text textile">
            <p>Paragraph: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</p>
            <ul>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ul>
            <ol>
            <li>Listenpunkt</li>
            <li>Listenpunkt</li>
            </ol>
            <p>Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
               
    </div>
    
</div>
Großbild: [alt-Text] [Link überblendet Fenster mit einem modalen Dialogfeld]

This image is wrapped in a link with class .js-cbox-imagezoom

@anake - stock.adobe.com

Add colorbox

This image is wrapped in a link with class .js-cbox-imagezoom
HTML
<div class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <a href="../../styleguide/static/adobestock/AdobeStock_72315207_980px_4x3.jpg" class="js-cbox-imagezoom" title="Großbild: [alt-Text]">
                <img src="../../styleguide/static/adobestock/AdobeStock_72315207_400px.jpg" alt="Großbild: [alt-Text]" >
                <span class="aural">[Link überblendet Fenster mit einem modalen Dialogfeld]</span>
            </a>
        </div>
        <p class="image__caption">
            This image is wrapped in a link with class <code class="sg-code-inline">.js-cbox-imagezoom</code>
        </p>
        <p class="image__copyright">
            @anake - stock.adobe.com
        </p>
    </div>
    <h2 class="title">Add colorbox</h2>
    <div class="text textile">
            This image is wrapped in a link with class <code class="sg-code-inline">.js-cbox-imagezoom</code>   
    </div>
    
</div>

Text/Bild Module im Flexgrid

  • Alternative Bildbeschreibung

    @copyright

    Spalte 1

    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Alternative Bildbeschreibung

    @copyright

    Spalte 2

    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Alternative Bildbeschreibung

    @copyright

    Spalte 3

    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
HTML
<h2 class="title">Text/Bild Module im Flexgrid</h2>
<ul class="flexgrid grid--3">
         <li>
        <div class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h3 class="title">Spalte 1</h3>
    <div class="text textile">
            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.   
    </div>
    
</div>

        </li>
         <li>
        <div class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h3 class="title">Spalte 2</h3>
    <div class="text textile">
            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.   
    </div>
    
</div>

        </li>
         <li>
        <div class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    <h3 class="title">Spalte 3</h3>
    <div class="text textile">
            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.   
    </div>
    
</div>

        </li>
</ul>