Event Listing Item
Source: https://dripyard.com/docs/dripyard-base/components/event-listing-item
Theme: dripyard-base
A component for displaying event information in a structured layout with date block, title, description, and event details. Designed for use in event listings.
Usage
{{ include('dripyard_base:event-listing-item', {
title: 'Summer Music Festival',
url: '/events/summer-festival',
date_time_stamp_begin: '2024-07-15T14:30:00Z',
description: 'Join us for an amazing outdoor music experience featuring local artists.',
formatted_time: '2:30 PM - 8:00 PM',
location: 'Central Park Amphitheater'
}, with_context = false) }}
Props
| Property | Type | Required | Description |
|---|---|---|---|
title |
string | Yes | Event title/name |
url |
string | Yes | Link to event details page |
date_time_stamp_begin |
string | Yes | Event start date/time in ISO format |
description |
string | No | Event description text |
formatted_time |
string | No | Human-readable time display (e.g., "2:30 PM - 5:00 PM") |
location |
string | No | Event venue or location |
Slots
| Slot | Description |
|---|---|
content_left |
Left content area (typically contains date block) |
content_center |
Center content area (title and description) |
content_right |
Right content area (time and location details) |
CSS Custom Properties
--event-listing-item-gap- Spacing between event listing sections--event-listing-item-background-color- Background color for event items--event-listing-item-text-color- Text color for event content
Layout Structure
The component uses a three-column grid layout:
- First column: Date block component displaying month and day
- Second column: Event title (linked) and optional description
- Third column: Event time and location details
Responsive Behavior
- Mobile: Stacked vertical layout with reduced spacing
- Tablet and up: Three-column grid layout for optimal content organization
- Container queries: Adapts based on available container width
Accessibility Features
- Semantic article: Uses `` element for proper content structure
- Accessible links: Event title link provides clear navigation target
- Time element: Date block uses semantic `` element with datetime attribute
- Hierarchical headings: Uses H3 for event titles to maintain heading hierarchy
Integration
Date Block Component
The event listing automatically includes the date-block component in the left content area, passing the date_time_stamp_begin value for date display.
Event Data
Designed to work with Drupal event content types and can be integrated with:
- Event content types
- Calendar modules
- Custom event listing views
- Event management systems
Content Guidelines
Title
- Keep event titles concise and descriptive
- Use title case for proper names and events
- Avoid excessive punctuation
Description
- Provide brief, engaging descriptions
- Focus on key event highlights
- Keep length appropriate for listing context
Time and Location
- Use consistent time formatting across events
- Include full venue names when possible
- Consider time zone information for remote events