Date block list

Date block list

HTML


<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-->

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
`orc-c-date-block-list` 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.
`orc-l-grid` Required	Apply in addition to `orc-c-date-block-list` to layout date block list items in a grid format. Apply `orc-l-grid--3up` in addition to this to layout items 3 across and wrap on large screens for example.
`orc-c-date-block-list__item` Required	Apply to each date block list item.
`orc-l-grid__item` Required	Apply in addition to `orc-c-date-block-list__item` to help layout these in a grid format. This way `orc-l-grid` can target the `orc-l-grid__item` and format these accordingly.
`orc-c-date-block` Required	Applied to the container of the actual date block. See the date block for more information about classes used in this component.

Date block list `orc-c-date-block-list`

Usage

When to use

When to consider an alternative