1. Components
  2. Blocks and cards

Media block In Progress

An effiicient use of image, headline, and descriptive text to promote and link to content.

Default media block orc-c-media-block

An effiicient use of image, headline, and descriptive text to promote and link to content.

Dark media block orc-c-media-block--dark

Places the content overtap a dark background.

Lined media block orc-c-media-block--lined

Adds a line beneath the media block for visual separation from other content.

  • 

    <div class="orc-c-media-block ">
  <div class="orc-c-media-block__media">

    <img class="orc-c-media-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-1024x576.png" alt="" />


  </div>
  <!-- end orc-c-media-block__media -->

  <div class="orc-c-media-block__body">


    <h2 class="orc-c-media-block__heading">
      Heading ipsum dolor sit (39 characters)
    </h2>


    <p class="orc-c-media-block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

  </div>
  <!-- end orc-c-media-block__body -->

</div>
<!-- end orc-c-media-block -->
    

  • 

    <div class="orc-c-media-block orc-c-media-block--dark">
  <div class="orc-c-media-block__media">

    <img class="orc-c-media-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-1024x576.png" alt="" />


  </div>
  <!-- end orc-c-media-block__media -->

  <div class="orc-c-media-block__body">


    <h2 class="orc-c-media-block__heading">
      Heading ipsum dolor sit (39 characters)
    </h2>


    <p class="orc-c-media-block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

  </div>
  <!-- end orc-c-media-block__body -->

</div>
<!-- end orc-c-media-block -->
    

  • 

    <div class="orc-c-media-block orc-c-media-block--lined">
  <div class="orc-c-media-block__media">

    <img class="orc-c-media-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-1024x576.png" alt="" />


  </div>
  <!-- end orc-c-media-block__media -->

  <div class="orc-c-media-block__body">


    <h2 class="orc-c-media-block__heading">
      Heading ipsum dolor sit (39 characters)
    </h2>


    <p class="orc-c-media-block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

  </div>
  <!-- end orc-c-media-block__body -->

</div>
<!-- end orc-c-media-block -->

Usage

When to use

Media blocks succinctly promote a feature or content. Use them to gently usher a user elsewhere.

When to consider an alternative

If you’re promoting an event, a date block is the better choice. If you have many pieces of content to promote, use a media block list instead.

Class Name Description 
orc-c-media-block
Required

Apply to the media block’s containing HTML element. This is set to display: flex so that the image sits next to the body of text.

 
orc-c-media-block--dark
Modifier

Add to orc-c-media-block to apply a dark background and lighter text to the media block. This is best used within the orc-l-main--black theme.

 
orc-c-media-block--lined
Modifier

Add to orc-c-media-block to apply a bottom border to the media block. This is best used within a list of media blocks.

 
orc-c-media-block__media
Required

The container within orc-c-media-block that houses the media (i.e. image) of the component.

 
orc-c-media-block__img
Required

The image within orc-c-media-block__media

 
orc-c-media-block__body
Required

The container within orc-c-media-block that houses the textual elements of the component.

 
orc-c-media-block__kicker

Added above the orc-c-media-block__heading in the body to add more context as to what the media block represents

 
orc-c-media-block__heading
Recommended

The main title of the media block. This should usually be applied to an <h2> tag within the orc-c-media-block__body.

 
orc-c-media-block__link

Optional link that can be placed around the text within orc-c-media-block__heading in order to get this heading to link to another page

 
orc-c-media-block__subheading

Optional short subtitle below the heading that adds additional context on the information being displayed.

 
orc-c-media-block_desc

Description of the media block that goes more into detail about the topic of the component