Date Cards
Date cards represent information about a calendar event, with a side by side display of a “card” showing the date of the event, next to the event’s title, time, and (optionally) location.
When to use date cards
Use date cards when you want to display a list of time-sensitive events such as Libraries Events, Exhibits, or Workshops.
When not to use date cards
Avoid date cards if the items you want to list are not time-sensitive, or when all the events occur on the same day. For example, a conference schedule where all the events take place on the same day.
Usage
Date card lists usually fill the full main content area, but there’s also a small date card available for use in sidebars.
The small date cards will fill whatever container they're placed in, and look best at 1/4 width (the Workshops sidebar on User Activities) or 1/2 width (the combined Events, Exhibits, and Workshops list on the homepage).
All date cards must contain a date, time, and title. Large date cards can also contain an optional location, which should link to the Drupal space node for Libraries locations.
All date cards are wrapped in a ul class="date-card-list” element, and each date card in the list is a regular li element. Each li should contain one a element that links to the event.
Examples
Regular (full width) date cards
-
Dec
4
Pause for Paws
2:00pm-3:00pm
Jay Lawrence and Ella Apple Technology Showcase, Hunt Library
-
Dec
10
Pause for Paws 2: Electric Boogaloo
9:30am-10:30am
Jay Lawrence and Ella Apple Technology Showcase, Hunt Library
-
Jan
20
Pause for Paws 3: Just Keep Pausing
12:00pm-1:00pm
Jay Lawrence and Ella Apple Technology Showcase, Hunt Library