e8-card-group
Updated on Sep 18, 2025 7 minutes to readA flexible container component for grouping multiple e8-card components with different layout options.
Supports standard card groups, deck layout, or column layout depending on the columns and deck props.
Overview
e8-card-group is used to arrange multiple cards in a single layout.
By default, cards are grouped with equal spacing. Using the deck prop makes all cards share the same height, while columns arranges them in a columnar masonry-like layout.
The tag prop allows customization of the HTML element wrapping the group.
Cards inside the group can contain headers, bodies, footers, and images as usual.
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| columns | Enables a column layout for cards, similar to masonry style. | boolean | false |
| deck | Enables a deck layout where all cards share the same height. | boolean | false |
| tag | HTML tag used for the wrapping element of the card group. | string | 'div' |
Slots
| Slot | Description |
|---|---|
| default | Slot for inserting multiple e8-card components. |
Properties Details
Columns
If true, arranges the cards in a masonry-style column layout.
Default: false
<e8-card-group columns>
<e8-card header="Card 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</e8-card>
<e8-card header="Card 2">
<p>Short content for Card 2.</p>
</e8-card>
<e8-card header="Card 3">
<p>Card 3 has a longer content block to demonstrate different heights across cards in the columns layout.</p>
<p>Additional paragraph to make it taller than the others.</p>
</e8-card>
</e8-card-group>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Item 1A
- Item 1B
- Item 1C
Short content for Card 2.
Card 3 has a longer content block to demonstrate different heights across cards in the columns layout.
Additional paragraph to make it taller than the others.
Deck
If true, arranges the cards in a deck layout, ensuring equal height cards with spacing between them.
Default: false
<e8-card-group deck>
<e8-card header="Card A">
<p>Card A content is concise.</p>
</e8-card>
<e8-card header="Card B">
<p>Card B has medium length content with a list:</p>
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
</e8-card>
<e8-card header="Card C">
<p>Card C contains more detailed content:</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
</p>
<p>Another paragraph to show how the deck layout adjusts card heights.</p>
</e8-card>
</e8-card-group>Card A content is concise.
Card B has medium length content with a list:
- Point 1
- Point 2
Card C contains more detailed content:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
Another paragraph to show how the deck layout adjusts card heights.