Card List
ready

Collection of card items that can contain a brief description, an image, and a call to action.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdCardList } from '@fbin-web/neighborhood-core';
<nbhd-card-list id="nbhd-card-list">
  <nbhd-text slot="eyebrow" tag="div" variant="eyebrow">
    Fermentum Pellentesque Malesuada
  </nbhd-text>
  <nbhd-text slot="title" tag="h2" variant="title">Neighborhood Cards</nbhd-text>
  <nbhd-text slot="subtitle" tag="h3" variant="subtitle">Tortor Pellentesque</nbhd-text>
  <nbhd-text slot="content" tag="div">Curabitur blandit tempus porttitor.</nbhd-text>
  <nbhd-cta slot="cta" variant="tertiary" href="fun-cta-cards" aria-label="Learn more about CARDS"
    cssclass="cta-tracking-mtr-42">
    Main CTA
  </nbhd-cta>

  <nbhd-card slot="cards" size="small" alignment="center" orientation="landscape" background="primary-light">
    <nbhd-image slot="media" responsive="" width="" height=""
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      img-class="media-css-class-card-1" crop="">
    </nbhd-image>
    <nbhd-text class="card-title" tag="h4" slot="title">
      Card 1
    </nbhd-text>
    <nbhd-text slot="content" tag="div">Maecenas sed diam eget risus varius blandit sit amet non
      magna.</nbhd-text>
    <nbhd-cta slot="cta" variant="tertiary" href="fun-cta-card-1" class="cta-tracking-mtr-card1"
      aria-label="Learn more about Card 1">
      CTA 1
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card slot="cards" size="small" alignment="center" orientation="landscape" background="primary-light">
    <nbhd-image slot="media" responsive="" width="" height=""
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      img-class="media-css-class-card-2" crop="">
    </nbhd-image>
    <nbhd-text class="card-title" tag="h4" slot="title">
      Card 2
    </nbhd-text>
    <nbhd-text slot="content" tag="div">Maecenas sed diam eget risus varius blandit sit amet non
      magna.</nbhd-text>
    <nbhd-cta slot="cta" variant="tertiary" href="fun-cta-card-2" class="cta-tracking-mtr-card2"
      aria-label="Learn more about Card 2">
      CTA 2
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card slot="cards" size="small" alignment="center" orientation="landscape" background="primary-light">
    <nbhd-image slot="media" responsive="" width="" height=""
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      img-class="media-css-class-card-3" crop="">
    </nbhd-image>
    <nbhd-text class="card-title" tag="h4" slot="title">
      Card 3
    </nbhd-text>
    <nbhd-text slot="content" tag="div">Maecenas sed diam eget risus varius blandit sit amet non
      magna.</nbhd-text>
    <nbhd-cta slot="cta" variant="tertiary" href="fun-cta-card-3" class="cta-tracking-mtr-card3"
      aria-label="Learn more about Card 3">
      CTA 3
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card slot="cards" size="small" alignment="center" orientation="landscape" background="primary-light">
    <nbhd-image slot="media" responsive="" width="" height=""
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      img-class="media-css-class-card-4" crop="">
    </nbhd-image>
    <nbhd-text class="card-title" tag="h4" slot="title" dark>
      Card 4
    </nbhd-text>
    <nbhd-text slot="content" tag="div" dark>Maecenas sed diam eget risus varius blandit sit amet non
      magna.</nbhd-text>
    <nbhd-cta slot="cta" variant="tertiary" href="fun-cta-card-4" class="cta-tracking-mtr-card4"
      aria-label="Learn more about Card 4" dark>
      CTA 4
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card slot="cards" size="small" alignment="center" orientation="landscape" background="primary-light">
    <nbhd-image slot="media" responsive="" width="" height=""
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      img-class="media-css-class-card-5" crop="">
    </nbhd-image>
    <nbhd-text class="card-title" tag="h4" slot="title">
      Card 5
    </nbhd-text>
    <nbhd-text slot="content" tag="div">Maecenas sed diam eget risus varius blandit sit amet non
      magna.</nbhd-text>
    <nbhd-cta slot="cta" variant="tertiary" href="fun-cta-card-5" external="" class="cta-tracking-mtr-card5"
      aria-label="Learn more about Card 5">
      CTA 5
    </nbhd-cta>
  </nbhd-card>
</nbhd-card-list>

React 

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

const App = () => (
  <>
    <NbhdCardList id="NbhdCard-list">
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow">
        Fermentum Pellentesque Malesuada
      </NbhdText>
      <NbhdText
        slot="title"
        tag="h2"
        variant="title">
        Neighborhood Cards
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle">
        Tortor Pellentesque
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div">
        Curabitur blandit tempus porttitor.
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="tertiary"
        href="fun-cta-cards"
        ariaLabel="Learn more about CARDS"
        cssClass="cta-tracking-mtr-42">
        Main CTA
      </NbhdCta>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        background="primary-light">
        <NbhdImage
          slot="media"
          responsive=""
          width=""
          height=""
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          imgClass="media-css-class-card-1"
          crop=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title">
          Card 1
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="tertiary"
          href="fun-cta-card-1"
          class="cta-tracking-mtr-card1"
          ariaLabel="Learn more about Card 1">
          CTA 1
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        background="primary-light">
        <NbhdImage
          slot="media"
          responsive=""
          width=""
          height=""
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          imgClass="media-css-class-card-2"
          crop=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title">
          Card 2
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="tertiary"
          href="fun-cta-card-2"
          class="cta-tracking-mtr-card2"
          aria-label="Learn more about Card 2">
          CTA 2
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        background="primary-light">
        <NbhdImage
          slot="media"
          responsive=""
          width=""
          height=""
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          imgClass="media-css-class-card-3"
          crop=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title">
          Card 3
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="tertiary"
          href="fun-cta-card-3"
          class="cta-tracking-mtr-card3"
          ariaLabel="Learn more about Card 3">
          CTA 3
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape">
        <NbhdImage
          slot="media"
          responsive=""
          width=""
          height=""
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          imgClass="media-css-class-card-4"
          crop=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title"
          dark>
          Card 4
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div"
          dark>
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="tertiary"
          href="fun-cta-card-4"
          class="cta-tracking-mtr-card4"
          aria-label="Learn more about Card 4"
          dark>
          CTA 4
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        background="primary-light">
        <NbhdImage
          slot="media"
          responsive=""
          width=""
          height=""
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          imgClass="media-css-class-card-5"
          crop=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title">
          Card 5
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="tertiary"
          href="fun-cta-card-5"
          external=""
          class="cta-tracking-mtr-card5"
          ariaLabel="Learn more about Card 5">
          CTA 5
        </NbhdCta>
      </NbhdCard>
    </NbhdCardList>
  </>
);

Image Dimensions

If not providing a resized image be sure to enable cropping feature for the component properties.

Description Dimension
Small and Medium Card Item Landscape 238px x 160px
Small and Medium Card Item Portrait 160px x 238px
Small and Medium Card Item Square 238px x 238px
Large and XLarge Card Item Landscape 445px x 300px
Large and XLarge Card Item Portrait 300px x 445px
Large and XLarge Card Item Square 445px x 445px

Properties

Property Attribute Type Default Description
data Deprecated CardListData Content for component main header and CTA.
cards Deprecated CardData[] Array of card data objects for individual card items.
header header boolean true Controls whether to display the component header section.
headerAlignment header-alignment left | center | right center The alignment for main component header content. Also sets the alignment for the main component footer when footer is enabled.
headerThemed header-themed boolean false When enabled only the main component header element will have the background color from background
footer footer boolean false When enabled the main cta for the Card List will be displayed in the footer below the list of cards.
compact compact boolean false Set the component max-inline-size to --nbhd-maxInlineSize
shadow shadow boolean false Add shadow to card items.
noZoom no-zoom boolean false Turn off the hover zoom effect for card items.
listAlignment list-alignment left | center | right center Set the alignment of card items in the list. This only applies when the total number of cards is less than row max that is determined from size
size size small | medium | large | xlarge small Set the card item size and max row limit on desktop for all items.
small = 5 cards
medium = 4 cards
large = 3 cards
xlarge = 2 cards
orientation orientation landscape | square | portrait landscape Set the orientation shape of the media element.
reversed reversed boolean false Reverse the Card items layout.
clickable clickable boolean false Enable the entire card item as a clickable call to action. When enabled the Card item cta element will not be displayed.
clickableAction clickable-action function Function to execute when a clickable card is activated.
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. This is global and will affect all cards.
cardAlignment card-alignment left | center | right center Set the alignment content for card items.
contentBackground content-background none | primary-light | secondary-light | primary-dark | secondary-dark none Background theme color for card content areas.
background background none | primary-light | secondary-light | primary-dark | secondary-dark none Background theme color for main component.
marginTop margin-top none | small | medium | large none Adjust margin above the component.
none = 0
small = 24px
medium = 48px
large = 96px
marginBottom margin-bottom none | small | medium | large none Adjust margin below the component.
none = 0
small = 24px
medium = 48px
large = 96px
paddingTop padding-top default | none | small | medium | large default Adjust padding to the top of the component.
default = component's top padding
none = 0
small = 24px
medium = 48px
large = 96px
paddingBottom padding-bottom default | none | small | medium | large default Adjust padding to the bottom of the component.
default = component's bottom padding
none = 0
small = 24px
medium = 48px
large = 96px

Data Structure

Structure for the CardListData interface, used for the main component header content. This is deprecated; the preferred method is using slots.

Property Type Required Description
title string No Main headline content for the Card List component header.
eyebrow string No Short introductory content above the title in the component header.
subtitle string No Secondary title content that appears under the main title in the component header.
content string No General content block for the component header description text.
cta CTA No Call to Action data object for the main component header CTA button.

Card Structure

Structure for the CardData interface, used for individual card items within the list. This is deprecated; the preferred method is using slots.

Property Type Required Description
title string No Optional title text for the individual card item. Displays as the primary heading for the card.
content string No Optional descriptive text content for the card item. Appears below the title and provides additional context or details.
cta CTA No Optional Call to Action object for the card item. Creates a button or link within the individual card. Not displayed when the card is clickable.
media Media No Optional media object containing image or video information. Defines the visual content displayed in the card's media area.
overlay boolean No Optional flag to set the card media as a background overlay. When true, the media becomes the card background and content text is overlaid on top. The card's content text will be hidden in this mode.
clickableAction function No Optional custom function to execute when this specific card is clicked. Provides individual card-level click handling that overrides the global clickable behavior.
clickable boolean No Optional flag to enable this specific card as clickable. Provides individual card-level control independent of the global component clickable property.

CTA Structure

Properties for the CTA interface, used for Call to Action buttons throughout the component

Property Type Required Description
label string Yes The display text for the CTA button.
href string Yes The URL or path that the CTA button will navigate to when clicked.
ariaLabel string No Optional accessibility label for screen readers. If not provided, the label will be used.
external boolean No Set to true if the CTA links to an external website. This adds appropriate security attributes and visual indicators.
class string No Optional CSS class name(s) to apply additional custom styling to the CTA button.

Media Structure

Properties for the Media interface, used for images and videos in card items

Property Type Required Description
src string Yes The source URL or path to the media file (image or video).
alt string Yes Alternative text description for accessibility. Required for all media types to support screen readers.
type image | video Yes Specifies the media type to determine how the content should be rendered and handled.
class string No Optional CSS class name(s) to apply additional custom styling to the media element.
crop none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left No Optional cropping position for the media. Determines how the media should be positioned when cropped to fit the container. Options include center, top, bottom, left, right, and corner combinations.

Slots

Name Description
eyebrow Short introductory content above the title in the component header. Alternative to using data.eyebrow property.
title Main headline content for the Card List component header. Alternative to using data.title property.
subtitle Secondary title content that appears under the main title in the component header. Alternative to using data.subtitle property.
content General content block for the component header description text. Alternative to using data.content property.
cta Call to Action content for the main component header or footer (depending on footer property). Alternative to using data.cta property.
cards Custom card content as an alternative to using the cards property. Allows for direct placement of nbhd-card elements or other content within the card grid.

CSS Parts

Name Description
base The main component wrapper element.
base-container The main component container element.
header The main component header element.
header-container The container element for the header.
footer The main component footer element when footer is enabled.
eyebrow The main component eyebrow element.
title The main component title element.
subtitle The main component subtitle element.
content The main component content element.
cta The main component call-to-action element.
grid The component grid container element that holds the card items.

CSS Properties

Property Default Value
--nbhd-cardList-marginInline var(--nbhd-space-0, 0)
--nbhd-cardList-maxInlineSize 100%
--nbhd-cardList-paddingBlock var(--nbhd-space-0, 0) var(--nbhd-space-6, 24px)
--nbhd-cardList-textAlign center
--nbhd-cardList-header-marginBlock 0 calc(var(--nbhd-space-9, 36px) * -1)
--nbhd-cardList-header-paddingBlock var(--nbhd-space-6, 24px) var(--nbhd-space-17, 68px)
--nbhd-cardList-header-paddingInline var(--nbhd-space-6, 24px)
--nbhd-cardList-header-position relative
--nbhd-cardList-footer-marginBlock var(--nbhd-space-11, 44px) 0
--nbhd-cardList-grid-columnGap var(--nbhd-space-6, 24px)
--nbhd-cardList-grid-display grid
--nbhd-cardList-grid-gridTemplateColumns repeat(1, 1fr)
--nbhd-cardList-grid-justifyContent center
--nbhd-cardList-grid-position relative
--nbhd-cardList-grid-rowGap var(--nbhd-space-6, 24px)
--nbhd-cardList-grid-zIndex 1

Dependencies

This component contains the following components as dependencies.