CardReady

Cards are shadowed surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

Open in new window

View RTL

<nord-card>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel
  molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
</nord-card>

<nord-stack>
  <nord-card padding="none">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  </nord-card>
  <nord-card padding="m">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  </nord-card>
  <nord-card padding="l">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  </nord-card>
</nord-stack>

<nord-stack class="stack" direction="horizontal" gap="l">
  <nord-card padding="l">
    <h2 slot="header">Account overview</h2>
    <nord-stack direction="horizontal">
      <nord-stack gap="l">
        <p>
          View all saved data on your Nordhealth account and choose what activity is kept to personalize your
          experience.
        </p>
        <nord-button variant="primary">Manage your account</nord-button>
      </nord-stack>
    </nord-stack>
  </nord-card>
  <nord-card padding="l">
    <h2 slot="header">Security checkup</h2>
    <nord-stack direction="horizontal">
      <nord-stack gap="l">
        <p>Our Security Checkup analyzed your account and data. We found no recommended actions this time.</p>
        <nord-button variant="primary">Manage security</nord-button>
      </nord-stack>
    </nord-stack>
  </nord-card>
</nord-stack>

<style>
  @media (max-width: 768px) {
    .stack {
      flex-direction: column;
    }
  }
</style>

<nord-stack direction="horizontal">
  <nord-card>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit.
    <div slot="footer">
      <hr class="n-divider" />
      <p class="n-typescale-m n-margin-bs-m">Footer content</p>
    </div>
  </nord-card>
  <nord-card>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    <div slot="footer">
      <hr class="n-divider" />
      <p class="n-typescale-m n-margin-bs-m">Footer content</p>
    </div>
  </nord-card>
  <nord-card>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
    <div slot="footer">
      <hr class="n-divider" />
      <p class="n-typescale-m n-margin-bs-m">Footer content</p>
    </div>
  </nord-card>
</nord-stack>

<nord-stack style="max-width: 340px; margin: var(--n-space-xl) auto">
  <nord-banner shadow variant="warning">You’ve been signed out. Please sign in to continue.</nord-banner>
  <nord-card padding="l">
    <h1 slot="header">Sign in to Nord</h1>
    <form action="#">
      <nord-stack>
        <nord-input
          label="Username"
          expand
          required
          hide-required
          name="username"
          type="email"
          placeholder="user@example.com"
        ></nord-input>
        <nord-input
          label="Password"
          expand
          required
          hide-required
          name="password"
          type="password"
          placeholder="••••••••"
        >
        </nord-input>
        <nord-button type="submit" expand variant="primary">Sign in</nord-button>
      </nord-stack>
    </form>
  </nord-card>
  <nord-card class="n-align-center"> New to Nord? <a href="#">Create an account</a>. </nord-card>
</nord-stack>

<nord-card padding="none">
  <h2 slot="header">Your items</h2>

  <div slot="header-end">
    <nord-input size="s" label="Search" hide-label placeholder="Item name" type="search"></nord-input>
    <nord-select hide-label size="s" label="Filter by state" placeholder="Please select">
      <nord-icon slot="icon" name="interface-filter"></nord-icon>
      <option value="active">Active</option>
      <option value="archived">Archived</option>
    </nord-select>

    <nord-select hide-label size="s" label="Sort" placeholder="Please select">
      <nord-icon slot="icon" name="arrow-up-down-long"></nord-icon>
      <option>Creation date</option>
      <option>Last modified date</option>
    </nord-select>
  </div>

  <nord-table>
    <table>
      <thead>
        <tr>
          <th class="n-table-align-right">ID</th>
          <th>Name</th>
          <th>Description</th>
          <th>State</th>
          <th class="n-table-align-right">Creation date</th>
          <th class="n-table-align-right">Last modified date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="n-table-align-right">01</td>
          <td>Item name 1</td>
          <td class="n-caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td>
          <td>
            <nord-badge variant="success">Active</nord-badge>
          </td>
          <td class="n-caption n-table-align-right">20.3.2020</td>
          <td class="n-caption n-table-align-right">20.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">02</td>
          <td>Item name 2</td>
          <td class="n-caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td>
          <td>
            <nord-badge variant="warning">Archived</nord-badge>
          </td>
          <td class="n-caption n-table-align-right">19.3.2020</td>
          <td class="n-caption n-table-align-right">19.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">03</td>
          <td>Item name 3</td>
          <td class="n-caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td>
          <td>
            <nord-badge variant="success">Active</nord-badge>
          </td>
          <td class="n-caption n-table-align-right">18.3.2020</td>
          <td class="n-caption n-table-align-right">18.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">04</td>
          <td>Item name 4</td>
          <td class="n-caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td>
          <td>
            <nord-badge variant="success">Active</nord-badge>
          </td>
          <td class="n-caption n-table-align-right">17.3.2020</td>
          <td class="n-caption n-table-align-right">17.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">05</td>
          <td>Item name 5</td>
          <td class="n-caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td>
          <td>
            <nord-badge variant="warning">Archived</nord-badge>
          </td>
          <td class="n-caption n-table-align-right">16.3.2020</td>
          <td class="n-caption n-table-align-right">16.3.2021</td>
        </tr>
      </tbody>
    </table>
  </nord-table>
</nord-card>

<nord-card padding="m">
  <h2 slot="header">Header content</h2>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel
  molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  <div slot="footer">Footer content</div>
</nord-card>

<nord-card padding="none">
  <div class="n-padding-m">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  </div>
  <nord-divider></nord-divider>
  <div class="n-padding-m">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  </div>
  <nord-divider></nord-divider>
  <div class="n-padding-m">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae
    vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?
  </div>
</nord-card>

<nord-card padding="none">
  <h2 slot="header">Table heading</h2>
  <nord-table>
    <table>
      <thead>
        <tr>
          <th class="n-table-align-right">Amount</th>
          <th>Description</th>
          <th>Method</th>
          <th class="n-table-align-right">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="n-table-align-right">350,00&thinsp;€</td>
          <td class="n-table-ellipsis">
            Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
            adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
            consectetuer adipiscing
          </td>
          <td>Card</td>
          <td class="n-table-align-right">20.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">29,90&thinsp;€</td>
          <td class="n-table-ellipsis">
            Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
            adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
            consectetuer adipiscing
          </td>
          <td>Card</td>
          <td class="n-table-align-right">19.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">50,00&thinsp;€</td>
          <td class="n-table-ellipsis">
            Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
            adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
            consectetuer adipiscing
          </td>
          <td>Card</td>
          <td class="n-table-align-right">18.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">290,00&thinsp;€</td>
          <td class="n-table-ellipsis">
            Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
            adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
            consectetuer adipiscing
          </td>
          <td>Card</td>
          <td class="n-table-align-right">17.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">49,90&thinsp;€</td>
          <td class="n-table-ellipsis">
            Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
            adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
            consectetuer adipiscing
          </td>
          <td>Card</td>
          <td class="n-table-align-right">16.3.2021</td>
        </tr>
        <tr>
          <td class="n-table-align-right">25,00&thinsp;€</td>
          <td class="n-table-ellipsis">
            Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
            adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
            consectetuer adipiscing
          </td>
          <td>Card</td>
          <td class="n-table-align-right">15.3.2021</td>
        </tr>
      </tbody>
    </table>
  </nord-table>
</nord-card>

Properties

Property	Attribute	Description	Type	Default
`padding`	`padding`	Controls the padding of the card component. When set to “none”, the header and footer slots will still have padding.	`"m" \| "l" \| "none"`	`"m"`

Slots

Slot name	Description
Default slot	The card content.
`header`	Optional slot that holds a header for the card.
`header-end`	Optional slot that positions content at the end of the header. Useful for actions or additional info.
`footer`	Optional slot that holds footer content for the card.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-card-border-radius`	Controls how rounded the corners are, using border radius tokens.	`var(--n-border-radius)`
`--n-card-box-shadow`	Controls the surrounding shadow, using box shadow tokens.	`var(--n-box-shadow-popout)`
`--n-card-padding`	Controls the padding on all sides of the card.	`var(--n-space-m)`
`--n-card-slot-padding`	Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.	`var(--n-space-m)`

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

Use to display content and actions on a single topic inside a container.
Use to visually separate specific parts of content in an application view.
Use to wrap a form into a container, for example a login form.
Include a header when placing a Table component inside the card.

Don’t

Don’t place cards within cards. Consider using the divider component to break up sections instead.
Don’t use when you need to capture user’s attention in a prominent way.
Don’t use to inform user about important changes or conditions in the interface.
Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

CardReady

Properties

Slots

CSS Properties

Usage #

Do #

Don’t #

Integration

Troubleshooting

Was this page helpful?

Usage

Do

Don’t