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.

.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.

<section class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

.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.

<section class="modul-text_bild imagealignright">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

.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.

<section class="modul-text_bild imagealignleft fifty">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

.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.

<section class="modul-text_bild textbildbreit">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

.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.

<section 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>
    
</section>

.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.

<section class="modul-text_bild imagealignleft nowrap">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>
Alternative Bildbeschreibung [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 
<section class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <a href="../../dummy/adobestock/AdobeStock_72315207_980px_4x3.jpg" class="js-cbox-imagezoom" title="This image is wrapped in a link with class &lt;code class=&quot;sg-code-inline&quot;&gt;.js-cbox-imagezoom&lt;/code&gt; anake - stock.adobe.com">
                <img src="../../dummy/adobestock/AdobeStock_72315207_400px.jpg" alt="Alternative Bildbeschreibung" >
                <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>
    
</section>

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. 
<h2 class="title">Text/Bild Module im Flexgrid</h2>
<ul class="flexgrid grid--3">
         <li>
        <section class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

        </li>
         <li>
        <section class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

        </li>
         <li>
        <section class="modul-text_bild imagealignleft">
    <div class="image">
        <div class="image__image">
            <img src="../../dummy/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>
    
</section>

        </li>
</ul>