Article card
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Article | article | article | ||
| Image ratio | card_aspect_ratio | select | 1.78 | |
| Background | card_bg | color_background | #ffffff | |
| Border width | card_border_width | range | 1 | |
| Border color | card_border_color | color | #e5e7eb | |
| Corner radius | card_radius | select | rounded-2xl | |
| Shadow | card_shadow | select | none | |
| Padding | card_padding | range | 0 | Tailwind spacing scale 0-10 (1 = 4px, 10 = 40px). Uniform padding on all sides. |
| Hover effect | card_hover | select | none | |
| Hover shadow | card_hover_shadow | select | none | |
| Hover background | card_bg_hover | color_background | #ffffff | |
| Zoom image on hover | card_media_zoom | checkbox | false | |
| Enable overlay style | enable_overlay_style | checkbox | false | |
| Overlay ratio | overlay_ratio | range | 70 | When the actual width-to-height ratio of the image is less than or equal to this ratio. |
| Overlay background | overlay_background | color_background | linear-gradient(180deg, rgba(17,24,39,0) 35%, rgba(17,24,39,0.85) 100%) | Supports solid or gradient colors. |
| Vertical alignment | overlay_vertical_align | select | bottom | |
| Show author | card_show_author | checkbox | true | |
| Show excerpt | card_show_excerpts | checkbox | true | |
| Show tags | card_show_tags | select | hide | |
| Style | tag_style | select | solid | |
| Shape | tag_radius | select | rounded-full | |
| Size (mobile) | tag_size_mob | select | text-sm | |
| Size (desktop) | tag_size | select | text-base | |
| Color | tag_color | select | primary | |
| Custom color | tag_custom_bg | color_background | #f3f4f6 | Shown when Color = Custom. Supports solid or gradient colors. |
| Custom text color | tag_custom_text_color | color | #111827 | Shown when Color = Custom. |
| Tag class | tag_class | text | ||
| Show date | card_show_date | checkbox | true | |
| Show read more | card_show_more | checkbox | true | |
| Text align | card_text_align | text_alignment | left | |
| Title size (mobile) | card_title_size_mob | select | text-sm | |
| Title size (desktop) | card_title_size | select | text-base | |
| Title color (color) | card_title_color_mode | select | heading-text | |
| Title color (custom) | card_title_color | color | ||
| Title max lines | card_title_lines | range | 0 | 0 = unlimited. Longer text is clamped with an ellipsis. |
| Author size (mobile) | card_author_size_mob | select | text-sm | |
| Author size (desktop) | card_author_size | select | text-base | |
| Excerpt size (mobile) | card_excerpt_size_mob | select | text-sm | |
| Excerpt size (desktop) | card_excerpt_size | select | text-base | |
| Excerpt max lines | card_excerpt_lines | range | 0 | 0 = unlimited. Longer text is clamped with an ellipsis. |
| Date size (mobile) | card_date_size_mob | select | text-sm | |
| Date size (desktop) | card_date_size | select | text-base | |
| Link color | more_color | select | primary | |
| Custom color | more_custom_color | color | #111827 | Shown when Link color = Custom. |
| Link size (mobile) | more_size_mob | select | text-sm | |
| Link size (desktop) | more_size | select | text-base |
Option values
- Image ratio (
card_aspect_ratio): Auto (``), Custom (3:1) (3.0), Ultrawide (21:9) (2.33), Double-width (2:1) (2.0), Widescreen/HD (16:9) (1.78), Classic/DSLR (3:2) (1.5), ISO Paper (1.4:1) (1.4), Standard Definition/SD (4:3) (1.33), Landscape (5:4) (1.25), Square (1:1) (1.0), Instagram Portrait (4:5) (0.8), Portrait Photography (3:4) (0.75), Pinterest Pin Ratio (2:3) (0.67), Portrait (9:16) (0.56) - Corner radius (
card_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Shadow (
card_shadow): None (none), Small (sm), Medium (md), Large (lg) - Hover effect (
card_hover): None (none), Lift up (up), Lift down (down), Scale up (scale_up), Scale down (scale_down) - Hover shadow (
card_hover_shadow): None (none), Small (sm), Medium (md), Large (lg) - Vertical alignment (
overlay_vertical_align): Top (top), Middle (middle), Bottom (bottom) - Show tags (
card_show_tags): Hide (hide), Above title (title), In body (body), Over image (over) - Style (
tag_style): Solid (solid), Outline (outline), Ghost (ghost) - Shape (
tag_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Size (mobile) (
tag_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Size (desktop) (
tag_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Color (
tag_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Title size (mobile) (
card_title_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Title size (desktop) (
card_title_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Title color (color) (
card_title_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Author size (mobile) (
card_author_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Author size (desktop) (
card_author_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Excerpt size (mobile) (
card_excerpt_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Excerpt size (desktop) (
card_excerpt_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Date size (mobile) (
card_date_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Date size (desktop) (
card_date_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Link color (
more_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Black (black), White (white), Heading text (heading-text), Base text (base-text), Random (random), Custom (custom) - Link size (mobile) (
more_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Link size (desktop) (
more_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl)
Presets
- Article card