Card
ready

A card displays related information in a concise, visually grouped container.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdCard } from '@fbin-web/neighborhood-core';
<nbhd-card>
  <nbhd-image slot="media" responsive="" loading="lazy" crop=""
    src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
    img-class="media-css-class-card-1" width="445" height="300" position="center" alt="Fun ALT Card 1 for images">
  </nbhd-image>
  <nbhd-text tag="h4" slot="title" dark>Card Title</nbhd-text>
  <nbhd-text slot="content" tag="div" dark>Donec ullamcorper nulla non metus auctor fringilla.</nbhd-text>
  <nbhd-cta slot="cta" variant="tertiary" href="fun-test-link" class="" aria-label="" dark>
    Some Random Link
  </nbhd-cta>
</nbhd-card>
tertiary

React 

import { NbhdCard, NbhdImage, NbhdText, NbhdCta } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdCard>
      <NbhdImage
        slot="media"
        responsive=""
        loading="lazy"
        crop=""
        src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
        img-class="media-css-class-card-1"
        width="445"
        height="300"
        position="center"
        alt="Fun ALT Card 1 for images"></NbhdImage>
      <NbhdText
        tag="h4"
        slot="title"
        dark="true">
        Card Title
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div"
        dark="true">
        Donec ullamcorper nulla non metus auctor fringilla.
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="tertiary"
        href="fun-test-link"
        class=""
        aria-label=""
        dark="true">
        Some Random Link
      </NbhdCta>
    </NbhdCard>
  </>
);

Properties

Property Attribute Type Default Description
clickable clickable boolean false If true, the card will be clickable.
noZoom no-zoom boolean false If true, the card will not zoom on hover.
reversed reversed boolean false If true, the card will be reversed.
shadow shadow boolean false If true, the card will have a shadow.
size size small | medium | large | xlarge small The size of the card.
orientation orientation landscape | portrait | square landscape The orientation of the card.
alignment alignment left | center | right center The alignment of the card.
condensed condensed boolean false Enable additional padding around the media element.
overlay overlay boolean false Set the card media image to be the background for the card item. When enabled the Card item content will not be displayed.
background background none | primary-light | primary-dark | secondary-light | secondary-dark none The background theme of the card.
href href string When provided, makes the entire card clickable by wrapping it with a link element.
external external boolean false If true, the card link will open in a new tab (requires href).
clickableAction clickable-action function Function to execute when the card is clicked (alternative to href).

Slots

Name Description
title Content for the card title area, typically text or heading elements.
media Content for the card visual area, typically images or other media elements.
content Content for the main card body area, typically descriptive text or other content.
cta Content for the call-to-action area. Only displayed when the card is not clickable (no href or clickableAction).

CSS Parts

Name Description
base The main wrapper element. Used as the root container for non-clickable cards, and as the link wrapper for cards with href.
click-overlay The clickable button overlay. Applied when the card has a clickable action but no href.
visual The visual container that wraps the media content at the top of the card.
media The media slot container for images, videos, or other rich media content.
detail The detail container that wraps the text content (title, content, and CTA) below the visual area.
title The title slot container for the card's primary heading text.
content The content slot container for the card's descriptive text or body content.
cta The CTA slot container for call-to-action buttons. Only rendered when the card is not clickable and has no href.

CSS Properties

Property Default Value
--nbhd-card-blockSize 100%
--nbhd-card-boxShadow none
--nbhd-card-display flex
--nbhd-card-flexDirection column
--nbhd-card-justifyContent start
--nbhd-card-maxInlineSize 100%
--nbhd-card-overflow hidden
--nbhd-card-paddingBlockStart var(--nbhd-space-0, 0)
--nbhd-card-position relative
--nbhd-card-visual-aspectRatio 238 / 160
--nbhd-card-visual-blockSize auto
--nbhd-card-visual-inlineSize auto
--nbhd-card-visual-insetBlockStart auto
--nbhd-card-visual-insetInlineStart auto
--nbhd-card-visual-marginBlock var(--nbhd-space-0, 0)
--nbhd-card-visual-marginInline var(--nbhd-space-0, 0)
--nbhd-card-visual-overflow hidden
--nbhd-card-visual-paddingBlock var(--nbhd-space-0, 0)
--nbhd-card-visual-paddingInline var(--nbhd-space-0, 0)
--nbhd-card-visual-position static
--nbhd-card-visual-zIndex auto
--nbhd-card-detail-alignItems start
--nbhd-card-detail-backgroundImage none
--nbhd-card-detail-blockSize auto
--nbhd-card-detail-display block
--nbhd-card-detail-flexDirection column
--nbhd-card-detail-inlineSize auto
--nbhd-card-detail-insetBlockStart auto
--nbhd-card-detail-insetInlineStart auto
--nbhd-card-detail-justifyContent flex-end
--nbhd-card-detail-paddingBlock var(--nbhd-space-6, 24px)
--nbhd-card-detail-paddingInline var(--nbhd-space-6, 24px)
--nbhd-card-detail-position static
--nbhd-card-detail-textAlign start
--nbhd-card-detail-zIndex auto
--nbhd-card-title-color var(--nbhd-color-black)
--nbhd-card-title-fontSize var(--nbhd-fontSize-md, 18px)
--nbhd-card-title-fontWeight var(--nbhd-fontWeight-700, 700)
--nbhd-card-title-lineHeight var(--nbhd-lineHeight-1-5)
--nbhd-card-title-marginBlock 0 var(--nbhd-space-4, 16px)
--nbhd-card-title-marginInline var(--nbhd-space-0, 0)
--nbhd-card-title-paddingBlock var(--nbhd-space-0, 0)
--nbhd-card-title-paddingInline var(--nbhd-space-0, 0)

Dependencies

This component contains the following components as dependencies.