1. Components
  2. Blocks and cards

Date block Complete

All the details related to a calendar event, including the date, title, and a description.

Default date block orc-c-date-block

All the details related to a calendar event, including the date, title, and a description.

Dark date block orc-c-date-block--dark

Replaces the standard white background with a dark background.

  • 

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

  <div class="orc-c-date-block__date">
    <h3 class="orc-c-date-block__month">mon</h3>
    <span class="orc-c-date-block__day">26</span>
  </div>
  <!-- end orc-c-date-block__date -->

  <div class="orc-c-date-block__body">
    <h2 class="orc-c-date-block__heading">
      <a href="#" class="orc-c-date-block__link">
				Heading ipsum dolor sit (39 characters)
			</a>
    </h2>


    <p class="orc-c-date-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-date-block__body -->

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

  • 

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

  <div class="orc-c-date-block__date">
    <h3 class="orc-c-date-block__month">mon</h3>
    <span class="orc-c-date-block__day">26</span>
  </div>
  <!-- end orc-c-date-block__date -->

  <div class="orc-c-date-block__body">
    <h2 class="orc-c-date-block__heading">
      <a href="#" class="orc-c-date-block__link">
				Heading ipsum dolor sit (39 characters)
			</a>
    </h2>


    <p class="orc-c-date-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-date-block__body -->

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

Usage

When to use

Use on event pages and elsewhere to list or announce events.

When to consider an alternative

To promote content that isn’t event-based, a media block offers a similar visual layout without focusing on a specific date.

Class Name Description 
orc-c-date-block
Required

Default class for the date block. Set to display: flex to position the date to the left of the body of text

 
orc-c-date-block--dark
Modifier

Add to the orc-c-date-block element to change the text within to light text for the dark background theme

 
orc-c-date-block__date
Required

Container around the orc-c-date-block__month and orc-c-date-block__day that helps position the date within the component

 
orc-c-date-block__month

Used for the 3-letter month name (i.e. the Apr in Apr 26)

 
orc-c-date-block__day

Used for the number of day in the month (i.e. the 26 in Apr 26)

 
orc-c-date-block__body
Required

Container around the body of text within the orc-c-date-block that helps position it next to the date.

 
orc-c-date-block__kicker

Optional smaller text above orc-c-date-block__heading that adds context to the date block heading

 
orc-c-date-block__heading

The main headline of text of the date block

 
orc-c-date-block__link

Optional wrapper around the orc-c-date-block__heading that allows the heading to link to a different page

 
orc-c-date-block__subheading

Optional auxiliary subtitle below the heading

 
orc-c-date-block__description

Short passage of text that adds additional detail to the date block