Date block list
A collection of date blocks (calendar event details).
Date block list orc-c-date-block-list
A collection of date blocks (calendar event details).
-
<ul class="orc-c-date-block-list orc-l-grid "> <li class="orc-c-date-block-list__item orc-l-grid__item"> <div class="orc-c-date-block "> <div class="orc-c-date-block__date"> <h3 class="orc-c-date-block__month">Mar</h3> <span class="orc-c-date-block__day">10</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"> Bad Bunny </a> </h2> <h3 class="orc-c-date-block__subheading">The Chelsea</h3> <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 --> </li> <!-- end orc-c-date-block-list__item--> <li class="orc-c-date-block-list__item orc-l-grid__item"> <div class="orc-c-date-block "> <div class="orc-c-date-block__date"> <h3 class="orc-c-date-block__month">Apr</h3> <span class="orc-c-date-block__day">07</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"> The Doobie Brothers </a> </h2> <h3 class="orc-c-date-block__subheading">The Chelsea</h3> <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 --> </li> <!-- end orc-c-date-block-list__item--> <li class="orc-c-date-block-list__item orc-l-grid__item"> <div class="orc-c-date-block "> <div class="orc-c-date-block__date"> <h3 class="orc-c-date-block__month">Apr</h3> <span class="orc-c-date-block__day">21</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"> Alt-J </a> </h2> <h3 class="orc-c-date-block__subheading">The Chelsea</h3> <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 --> </li> <!-- end orc-c-date-block-list__item--> <li class="orc-c-date-block-list__item orc-l-grid__item"> <div class="orc-c-date-block "> <div class="orc-c-date-block__date"> <h3 class="orc-c-date-block__month">Jun</h3> <span class="orc-c-date-block__day">02</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"> Dane Cook </a> </h2> <h3 class="orc-c-date-block__subheading">The Chelsea</h3> <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 --> </li> <!-- end orc-c-date-block-list__item--> </ul> <!--end orc-c-date-block-list-->
Usage
When to use
When many events should be grouped together—and that will often be the case.
When to consider an alternative
A media block list can also be used to promote many calendar events. The difference is that media blocks include images, while date blocks prioritize the event date.
Class Name | Description |
---|---|
Required
|
Apply to the date block list’s containing HTML element. Use with a layout grid class to layout the list items in various formats, but it is recommended to stick with a stacked list rather than a grid. |
Required
|
Apply in addition to |
Required
|
Apply to each date block list item. |
Required
|
Apply in addition to |
Required
|
Applied to the container of the actual date block. See the date block for more information about classes used in this component. |