Calendar tile

Highlight an important date

Overview #

Use the calendar tile component to highlight an important date.

Examples #

Choose an example

<div class="rvt-cal">
  <span class="rvt-cal__month">Jan</span>
  <span class="rvt-cal__day">20</span>
  <span class="rvt-cal__year">2023</span>
</div>

Elements #

Element	Description	Usage	Required	Multiple
Month	Event month	Use a three-letter abbreviation	Month is required	Component may contain only one Month
Day	Event day	Avoid leading zeroes for single-digit dates	Day is required	Component may contain only one Day
Year	Event year	Use four-digit year	Year is optional	Component may contain only one Year

Usage #

Do

Use to highlight a date on an event page or in a calendar feed

Don't

Use to build an interface that visually represents an entire monthly calendar