Design System

Constructs

Reusable layout common patterns.

Flag

Regular

flag-construct image

This is a title

Morbi eget mattis ipsum. Donec massa nibh, bibendum at sem eu purus. Nunc in tortor eu tellus ultricies euismod.

Duis massa mi, pharetra eu nisl non, scelerisque laoreet diam. Fusce in malesuada justo. Aenean vulputate mi a pharetra lorem ipsum tristique.

<article class="flag-construct flag-construct--align-top">
  <div class="flag-construct__media">
    <img alt="flag-construct image" width="320" height="320" src="https://docs.openaerialmap.org/assets/graphics/content/design/earth-img-square.jpg" />
  </div>
  <div class="flag-construct__body">
    <h3>This is a title</h3>
    <p>Morbi eget mattis ipsum. Donec massa nibh, bibendum at sem eu purus. Nunc in tortor eu tellus ultricies euismod.</p>
    <p>Duis massa mi, pharetra eu nisl non, scelerisque laoreet diam. Fusce in malesuada justo. Aenean vulputate mi a pharetra lorem ipsum tristique.</p>
    <button class="button button--achromic" type="button"><span>Action</span></button>
  </div>
</article>

Reverted

This is a title

Morbi eget mattis ipsum. Donec massa nibh, bibendum at sem eu purus. Nunc in tortor eu tellus ultricies euismod.

Duis massa mi, pharetra eu nisl non, scelerisque laoreet diam. Fusce in malesuada justo. Aenean vulputate mi a pharetra lorem ipsum tristique.

flag-construct image
<article class="flag-construct flag-construct--align-top">
  <div class="flag-construct__body">
    <h3>This is a title</h3>
    <p>Morbi eget mattis ipsum. Donec massa nibh, bibendum at sem eu purus. Nunc in tortor eu tellus ultricies euismod.</p>
    <p>Duis massa mi, pharetra eu nisl non, scelerisque laoreet diam. Fusce in malesuada justo. Aenean vulputate mi a pharetra lorem ipsum tristique.</p>
    <button class="button button--achromic" type="button"><span>Action</span></button>
  </div>
  <div class="flag-construct__media">
    <img alt="flag-construct image" width="320" height="320" src="https://docs.openaerialmap.org/assets/graphics/content/design/earth-img-square.jpg" />
  </div>
</article>

Full bleed

Full bleed image
<figure class="bleed-full">
  <img class="image-full" width="2560" height="768" alt="Full bleed image" src="https://docs.openaerialmap.org/assets/graphics/content/design/earth-img-wide.jpg" />
</figure>