<div class="o-flex-line o-flex-line--[modifier class]">
  <div>
    <p class="mini">Eins</p>
  </div>
  <div>
    <p class="mini">Zwei</p>
  </div>
  <div>
    <p class="mini">Drei</p>
  </div>
</div>

<div class="table-rwd">
  <div class="table-rwd__overflow" tabindex="0">
    <div class="table-rwd__table-wrapper">
      <table>
        <thead>
          <tr>
            <th>Arbeiterunfallversicherungsgesetz</th>
            <th>Bundesausbildungsförderungsgesetz</th>
            <th>Behindertengleichstellungsgesetz</th>
            <th>Kraftfahrzeug-Haftpflichtversicherung</th>
            <th>Steuervergünstigungsabbaugesetz</th>
            <th>Nahrungsmittelunverträglichkeit</th>
            <th>Lebensversicherungsgesellschaft</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</td>
            <td>Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht.</td>
            <td>Eines Tages aber beschloß eine kleine Zeile Blindtext.</td>
            <td>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel.</td>
            <td>Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.</td>
            <td>Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern.</td>
            <td>Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz.</td>
          </tr>
          <tr>
            <td>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</td>
            <td>Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht.</td>
            <td>Eines Tages aber beschloß eine kleine Zeile Blindtext.</td>
            <td>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel.</td>
            <td>Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.</td>
            <td>Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern.</td>
            <td>Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz.</td>
          </tr>
          <tr>
            <td>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</td>
            <td>Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht.</td>
            <td>Eines Tages aber beschloß eine kleine Zeile Blindtext.</td>
            <td>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel.</td>
            <td>Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.</td>
            <td>Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern.</td>
            <td>Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz.</td>
          </tr>
          <tr>
            <td>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</td>
            <td>Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht.</td>
            <td>Eines Tages aber beschloß eine kleine Zeile Blindtext.</td>
            <td>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel.</td>
            <td>Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.</td>
            <td>Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern.</td>
            <td>Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="o-flag o-flag--[modifier class]">
  <div class="o-flag__media"><img src="https://placeholder.in2code.de/300x150" alt="Alternate text"/></div>
  <div class="o-flag__body">
    <h1>Flag</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
  </div>
</div>

<ul class="o-list-bare">
  <li>This is a list item in an unordered list</li>
  <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
  <li>This is the last list item</li>
</ul>

<ul class="o-list-inline">
  <li class="o-list-inline__item">One</li>
  <li class="o-list-inline__item">Two</li>
  <li class="o-list-inline__item">Three</li>
  <li class="o-list-inline__item">Four</li>
</ul>

<div class="o-container [modifier class]">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
  <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
</div>

<div class="[modifier class]">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
  <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
</div>