Blocks

The block pattern consists of a media element, such as an image or video, accopanied by some text above, below, or beside it.

Block patterns can be created using various object and utility classes.

Media Block

The media block is based on Nicole Sullivan’s popular Media Object pattern. It’s simply a common pattern of arranging items, often an image and descriptive text, side by side.

Nicolas Cage

Nicolas Kim Coppola, known professionally as Nicolas Cage, is an American actor and producer. He has performed in leading roles in a variety of films, ranging from romantic comedies and dramas to science fiction and action films.

Nicolas Cage

Nicolas Kim Coppola, known professionally as Nicolas Cage, is an American actor and producer. He has performed in leading roles in a variety of films, ranging from romantic comedies and dramas to science fiction and action films.

<div class="o-grid">

  <div class="o-grid-cell  u-size4of8">
    <!-- Block 3 -->
    <div class="u-flex  u-mb5">
      <div class="u-mr4">
        <i class="featureIcon  featureIcon--3dPdfs" aria-hidden="true"></i>
      </div>
      <div class="u-flexGrow1">
        <h3  class="u-mb3">Nicolas Cage</h3>
        <p class="u-mb0">
          Nicolas Kim Coppola, known professionally as Nicolas Cage, is an
          American actor and producer. He has performed in leading roles in a
          variety of films, ranging from romantic comedies and dramas to
          science fiction and action films.
        </p>
      </div>
    </div>
    <!-- End: Block 3 -->
  </div>

  <div class="o-grid-cell  u-size4of8">
    <!-- Block 4 -->
    <div class="u-flex  u-mb5">
      <div class="u-flexGrow1">
        <h3  class="u-mb3">Nicolas Cage</h3>
        <p class="u-mb0">
          Nicolas Kim Coppola, known professionally as Nicolas Cage, is an
          American actor and producer. He has performed in leading roles in a
          variety of films, ranging from romantic comedies and dramas to
          science fiction and action films.
        </p>
      </div>
      <div class="u-ml4">
        <i class="featureIcon  featureIcon--compareDocuments" aria-hidden="true"></i>
      </div>
    </div>
    <!-- End: Block 4 -->
  </div>

</div>

Media Block Stacked

Nicolas Cage

Nicolas Kim Coppola, known professionally as Nicolas Cage, is an American actor and producer. He has performed in leading roles in a variety of films, ranging from romantic comedies and dramas to science fiction and action films.

Nicolas Cage

Nicolas Kim Coppola, known professionally as Nicolas Cage, is an American actor and producer. He has performed in leading roles in a variety of films, ranging from romantic comedies and dramas to science fiction and action films.

<div class="o-grid">

  <div class="o-grid-cell  u-size4of8">
    <!-- Block 1 -->
    <div class="u-mb4">
      <div class="o-ratio  o-ratio--16x9  u-mb4">
        <img src="https://unsplash.it/200/113">
      </div>
      <h3>Nicolas Cage</h3>
      <p class="u-mb0">
        Nicolas Kim Coppola, known professionally as Nicolas Cage, is an American actor and producer. He has performed in leading roles in a variety of films, ranging from romantic comedies and dramas to science fiction and action films.
      </p>
    </div>
    <!-- End: Block 1 -->
  </div>

  <div class="o-grid-cell  u-size4of8">
    <!-- Block 2 -->
    <div class="u-mb4  u-txtCenter">
      <img class="u-mb4" src="https://unsplash.it/210/210">
      <h4 class="u-mb2">Nicolas Cage</h4>
      <p class="u-mb0">
        Nicolas Kim Coppola, known professionally as Nicolas Cage, is an American actor and producer. He has performed in leading roles in a variety of films, ranging from romantic comedies and dramas to science fiction and action films.
      </p>
    </div>
    <!-- End: Block 2 -->
  </div>

</div>