Compositions

Media Objects

Planned

Options

Traditional “media objects” (à la Nicole Sullivan) can be built entirely using Carbon utility classes.

Simple example

Name or Title

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

<div class="flex">
  <a class="square mr-2" href="">
    <img src="" width="" height="" loading="lazy" alt="">
  </a>
  <div>
    <div class="h4 mb-1">Name or Title</div>
    <p>A message or some descriptive text...</p>
  </div>  
</div>

Fancy example

Example with image on the right, and some other decoration:

Name or Title

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus.

<div class="flex flex-row-reverse mb-3 b-thin rounded-lg p-2">
  <a class="square rounded overflow-hidden" href="#/">
    <img src="" width="" height="" loading="lazy" alt="">
  </a>
  <div class="mr-2">
    <div class="h4 mb-0">Name or Title</div>
    <p class="mb-0">Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. </p>
  </div>
</div>

Nesting media objects

Media objects can easily be modified as required, and nested. For example:

Freda Blogworthy

Thomas Wingman

Duck Billington