1. Components
  2. Blocks and cards

Text block In Progress

A text unit consisting of a title, description, and kicker.

Default text block orc-c-text-block

A text unit consisting of a title, description, and kicker.

Small text block orc-c-text-block--small

Reduces the padding and text size within the component.

Bare text block orc-c-text-block--bare

Removes padding from around the component.

Dark text block orc-c-text-block--dark

Lightens the text and applies a dark background.

Centered text block orc-c-text-block--center

Center-justifies all text.

  • 

    <div class="orc-c-text-block ">

  <h4 class="orc-c-text-block__kicker">Kicker</h4>

  <h3 class="orc-c-text-block__title">
    Heading ipsum dolor sit (39 characters)
  </h3>

  <div class="orc-c-text-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
  </div>


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

  • 

    <div class="orc-c-text-block orc-c-text-block--small">

  <h4 class="orc-c-text-block__kicker">Kicker</h4>

  <h3 class="orc-c-text-block__title">
    Heading ipsum dolor sit (39 characters)
  </h3>

  <div class="orc-c-text-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
  </div>


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

  • 

    <div class="orc-c-text-block orc-c-text-block--bare">

  <h4 class="orc-c-text-block__kicker">Kicker</h4>

  <h3 class="orc-c-text-block__title">
    Heading ipsum dolor sit (39 characters)
  </h3>

  <div class="orc-c-text-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
  </div>


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

  • 

    <div class="orc-c-text-block orc-c-text-block--dark">

  <h4 class="orc-c-text-block__kicker">Kicker</h4>

  <h3 class="orc-c-text-block__title">
    Heading ipsum dolor sit (39 characters)
  </h3>

  <div class="orc-c-text-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
  </div>


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

  • 

    <div class="orc-c-text-block orc-c-text-block--center">

  <h4 class="orc-c-text-block__kicker">Kicker</h4>

  <h3 class="orc-c-text-block__title">
    Heading ipsum dolor sit (39 characters)
  </h3>

  <div class="orc-c-text-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
  </div>


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

Usage

When to use

Use this in marketing content to promote an aspect of the experience.

When to consider an alternative

If the content is data-based, use a stripe instead. If you have a great visual asset for the content, a media block is probably best.

Class Name Description 
orc-c-text-block
Required

Apply to the text block’s containing HTML element to format the inner textual elements. This also adds padding within the component.

 
orc-c-text-block--small
Modifier

Add to orc-c-text-block to reduce the padding within the component and decrease the text size within

 
orc-c-text-block--bare
Modifier

Add to orc-c-text-block to remove padding from around the component’s content

 
orc-c-text-block--dark
Modifier

Add to orc-c-text-block to change the background to a dark color and change the text to a lighter color. This should be used in the orc-l-main--black theme.

 
orc-c-text-block--center
Modifier

Add to orc-c-text-block to center the text within.

 
orc-c-text-block__kicker

Optional short line of text added above the orc-c-text-block__title to add more context as to what the text block represents

 
orc-c-text-block__title
Recommended

The main headline of the text block

 
orc-c-text-block__link

Optional <a> tag wrapper around the text within the orc-c-text-block__title which links this title to a different page or location

 
orc-c-text-block__desc
Recommended

Short excerpt below the orc-c-text-block__title that goes into more detail about what the title describes.

 
orc-c-btn-group

Optional group of buttons if you want to add actionable buttons or links within the text block