Card

npm1.8.3

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

label

Cancel

Confirm

Heading

label

Cancel

Confirm

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

Read

Content

Read

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