Content Card
Source: https://dripyard.com/docs/dripyard-base/components/content-card
Theme: dripyard-base
A simple content card component that displays a title, required link, optional metadata, horizontal divider, and body text in a clean card format.
Usage
{{ include('dripyard_base:content-card', {
title: 'Card Title',
link_href: '/example-link',
metadata: '20 March 2027',
body_text: 'This is the body text content for the card. It supports HTML formatting.',
background: true
}, with_context = false) }}
Props
| Property | Type | Required | Description |
|---|---|---|---|
title |
string | Yes | The card title text content |
link_href |
string | Yes | URL for the clickable title |
metadata |
string | No | Optional metadata text (e.g., date, category) |
body_text |
string | Yes | Body content supporting HTML formatting |
background |
boolean | No | Adds background color to the card |
CSS Custom Properties
--content-card-border-radius- Border radius for card corners (defaults tovar(--radius-sm))--content-card-background- Background color of the card (defaults tovar(--theme-surface))--content-card-heading-color- Color for the card title (defaults tovar(--theme-text-color-loud))--content-card-body-color- Color for the body text (defaults tovar(--theme-text-color-soft))--content-card-padding- Internal padding for card content (defaults to0, changes tovar(--spacing-xs)whenbackground: true)
Background Variants
Default (No Background)
- Minimal styling: No padding, transparent background with border
- Clean appearance: Simple border with rounded corners
Background Enabled (background: true)
- Enhanced styling: Adds background color and internal padding
- Background color: Uses
var(--theme-surface-alt)for subtle contrast - Content padding: Adds
var(--spacing-xs)padding around content