The main site footer component for the Dripyard Base theme with four content regions and configurable theme options.
Usage
{% embed 'dripyard_base:footer' with {
theme: 'dark'
} %}
{% block footer_top_content %}
{# Top footer content #}
{% endblock %}
{% block footer_left_content %}
{# Left footer content #}
{% endblock %}
{% block footer_right_content %}
{# Right footer content #}
{% endblock %}
{% block footer_bottom_content %}
{# Bottom footer content #}
{% endblock %}
{% endembed %}
Props
| Property | Type | Options | Description |
|---|---|---|---|
theme |
string | inherit, white, light, dark, black, primary |
Sets background and text colors |
Slots
| Slot | Description |
|---|---|
footer_top_content |
Full-width content area spanning entire footer width |
footer_left_content |
Left content area in two-column layout |
footer_right_content |
Right content area in two-column layout |
footer_bottom_content |
Full-width bottom content area |
CSS Custom Properties
--footer-surface- Background color for the footer--footer-text-color-soft- Soft text color for secondary content--footer-text-color-medium- Medium text color for main content--footer-link-color- Color for footer links--footer-border-color- Border color for footer elements
Layout Behavior
- Mobile: All content areas stack vertically and span full width
- Desktop: Left and right content areas form a two-column layout
Theme Integration
The footer integrates with Meridian's theme system:
- Page template: Invoked directly via
page.html.twig - Drupal regions: Each slot maps to a Drupal region (defined in
meridian.info.yml) - Theme settings: Theme can be configured via UI at
/admin/appearance/settings/meridian
Accessibility Features
- Semantic footer: Uses proper
<footer>element - Link styling: Enhanced link appearance with underline offset and transitions
- Color contrast: Theme system ensures proper contrast ratios
Related Components
- Menu Footer: Specialized menu component for footer navigation