Card Grid

NbCardGrid lays out a responsive grid of NbCards that wraps by card width rather than by page column. It answers a different question from NbGrid, which is why it is a separate component rather than another prop:

• NbGrid's grid prop is a span within the 16-column page grid. It answers "how much of the page does this element take".
• NbCardGrid's min is a column width. It answers "how many of these fit", and the answer comes from the card's own comfortable width, not from the page.

That distinction is why a catalogue of plugins and a catalogue of content types both ended up hand-writing repeat(auto-fill, minmax(260px, 1fr)).

<NbCardGrid min="260px" gap="md">
  <NbCard
    v-for="plugin in plugins"
    :key="plugin.id"
    :title="plugin.name"
    :subtitle="plugin.kind"
    :href="`/plugins/${plugin.id}`"
  >
    {{ plugin.summary }}
    <template #footer>
      <NbBadge size="sm">{{ plugin.format }}</NbBadge>
    </template>
  </NbCard>
</NbCardGrid>

Column width ​

min is the narrowest a column may be before the grid drops one. Cards never render narrower than it, except in a container that is itself narrower, where they shrink instead of overflowing.

auto-fill and auto-fit ​

auto-fill (the default) keeps the empty columns, so two cards in a wide container stay card-sized. auto-fit collapses them, so those two stretch across the row.

Prefer the default. A catalogue reads as a catalogue when its card size is constant and a short row is allowed to be short; stretching two cards across a desktop makes them look like panels.

Cards that do something ​

The card picks its element from its behaviour, so each case gets the right keyboard and the right browser affordances without being asked:

• href renders an <a>. Middle click, open-in-new-tab and the status-bar URL all work, which they do not for a click handler on a div.
• clickable renders a role="button" with a tabindex, and emits select on click, Enter and Space. For a card that opens something in place.
• Neither renders a plain div, so a card that does nothing does not advertise that it does.

Footers line up ​

The body takes the leftover height, so a row of cards with different amounts of description still lines its footers up along the bottom. That is the detail hand-rolled card grids most often miss.

NbCardGrid props ​

NbCard props ​

NbCard events ​

NbCard slots ​