1. Components
  2. Blocks and cards

Tout In Progress

A small call-to-action block, with or without a button.

Default tout orc-c-tout

A small call-to-action block, with or without a button.

Black tout orc-c-tout--black

Applies a dark background and lightens the text.

Purple tout orc-c-tout--purple

Applies a dark background with a gold, stylized header and lightened body text.

  • 

    <div class="orc-c-tout ">

  <div class="orc-c-tout__inner">


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

    <div class="orc-c-tout__description">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-tout__inner-->

</div>
<!--end orc-c-tout-->
    

  • 

    <div class="orc-c-tout orc-c-tout--black">

  <div class="orc-c-tout__inner">


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

    <div class="orc-c-tout__description">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-tout__inner-->

</div>
<!--end orc-c-tout-->
    

  • 

    <div class="orc-c-tout orc-c-tout--purple">

  <div class="orc-c-tout__inner">


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

    <div class="orc-c-tout__description">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-tout__inner-->

</div>
<!--end orc-c-tout-->

Usage

When to use

Use this when giving users something to do: book a room, get tickets, call for details. The button is optional, but it’s the best practice to include it.

When to consider an alternative

Touts are best for the completion of a user journey: for instance, booking ticket to a concert. For a call to action to the concert event page, for instance, use a media block or date block.

Class Name Description 
orc-c-tout
Required

Apply to the tout’s containing HTML element. This adds padding and sizes/positions a background image if there is one.

 
orc-c-tout--black
Modifier

Add to the orc-c-tout element to change the background to black and the text to a lighter color

 
orc-c-tout--purple
Modifier

Add to the orc-c-tout element to change the background to purple, the orc-c-tout__heading to gold, and the orc-c-tout__description to a lighter color.

 
orc-c-tout__inner
Required

Inner container of the tout that helps to position the content within the tout.

 
orc-c-tout__img

Place above the orc-c-tout__heading if an image needs to be placed within the tout.

 
orc-c-tout__heading
Recommended

Apply to the tout’s heading inside the orc-c-tout__inner. The recommended element for this class is <h3>.

 
orc-c-tout__description
Recommended

In-depth description about the topic of the tout. The recommended element for this class is a <div>.

 
orc-c-btn-group

Apply within orc-c-tout__inner if you want to add actionable buttons or links within the tout