The card component is used to group related content together in a visually organized way. The card should have a clear and consistent structure. The header should contain content that describes the content of the card.
Example
Heading
Content
code
<script type="module">
import '@blueprintui/components/include/card.js';
import '@blueprintui/components/include/button.js';
</script>
<bp-card>
<h2 slot="header" bp-text="subsection">Heading</h2>
<p bp-text="content">Content</p>
</bp-card>
Card Content
Heading
Heading
code
<div bp-layout="grid gap:sm cols:12 cols:6@sm">
<bp-card>
<h2 slot="header" bp-text="section">Heading</h2>
<bp-field>
<label>label</label>
<bp-input></bp-input>
</bp-field>
<div slot="footer" bp-layout="inline gap:xs inline:end">
<bp-button action="outline">Cancel</bp-button>
<bp-button status="accent">Confirm</bp-button>
</div>
</bp-card>
<bp-card>
<h2 slot="header" bp-text="section">Heading</h2>
<bp-field>
<label>label</label>
<bp-input></bp-input>
</bp-field>
<div slot="footer" bp-layout="inline gap:xs inline:end">
<bp-button action="outline">Cancel</bp-button>
<bp-button status="accent">Confirm</bp-button>
</div>
</bp-card>
</div>
Card Grid
Heading
Content
Heading
Content
Heading
Content
Heading
Content
code
<div bp-layout="grid gap:sm cols:12 cols:6@sm">
<bp-card>
<h2 slot="header" bp-text="subsection">Heading</h2>
<p bp-text="content">Content</p>
</bp-card>
<bp-card>
<h2 slot="header" bp-text="subsection">Heading</h2>
<p bp-text="content">Content</p>
</bp-card>
<bp-card>
<h2 slot="header" bp-text="subsection">Heading</h2>
<p bp-text="content">Content</p>
</bp-card>
<bp-card>
<h2 slot="header" bp-text="subsection">Heading</h2>
<p bp-text="content">Content</p>
</bp-card>
</div>
Card Media
Content
Content
code
<div bp-layout="grid cols:12 cols:6@sm gap:md">
<bp-card>
<img slot="header" src="http://via.placeholder.com/640x360" />
<p bp-text="content">Content</p>
<div slot="footer" bp-layout="inline gap:sm inline:end">
<bp-button action="outline">Read</bp-button>
</div>
</bp-card>
<bp-card>
<img slot="header" src="http://via.placeholder.com/640x360" />
<p bp-text="content">Content</p>
<div slot="footer" bp-layout="inline gap:sm inline:end">
<bp-button action="outline">Read</bp-button>
</div>
</bp-card>
</div>
Install
NPM
// npm package
import '@blueprintui/components/include/card.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/card.js/+esm';
</script>
Accessibility
- Use appropriate color contrast to make sure the text is easily readable for users with visual impairments.
- Use headings and labels to provide context and organization to the content within the card.
- Provide alternative text for images and other non-text elements within the card.
- Make sure the card is keyboard accessible, so users can navigate through the card and its elements.
bp-card
Properties
Name | Types | Description |
CSS Properties
Name | Types | Description |
--background |
| |
--background |
| |
--color |
| |
--border-radius |
| |
--padding |
| |
--height |
| |
--width |
|
Slots
Name | Types | Description |
default |
| slot for card content |
header |
| slot for card header |
footer |
| slot for card footer |