Card List

Ready

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

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdCardList } from '@fbin-web/neighborhood-core';

Usage

<nbhd-card-list size="small">
  <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 surface="secondary">
    <nbhd-image
      slot="media"
      provider="widen"
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      css-class="media-css-class-card-1"
      image-focus="center">
    </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"
      css-class="cta-tracking-mtr-card1"
      aria-label="Learn more about Card 1">
      CTA 1
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card surface="secondary">
    <nbhd-image
      slot="media"
      provider="widen"
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      css-class="media-css-class-card-2"
      image-focus="center">
    </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"
      css-class="cta-tracking-mtr-card2"
      aria-label="Learn more about Card 2">
      CTA 2
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card surface="secondary">
    <nbhd-image
      slot="media"
      provider="widen"
      src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
      css-class="media-css-class-card-3"
      image-focus="center">
    </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"
      css-class="cta-tracking-mtr-card3"
      aria-label="Learn more about Card 3">
      CTA 3
    </nbhd-cta>
  </nbhd-card>
</nbhd-card-list>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdCardList } from '@fbin-web/neighborhood-react';

Usage

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

const App = () => (
  <>
    <NbhdCardList size="small">
      <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 surface="secondary">
        <NbhdImage
          slot="media"
          provider="widen"
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          cssClass="media-css-class-card-1"
          imageFocus="center"></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"
          ctaClass="cta-tracking-mtr-card1"
          ariaLabel="Learn more about Card 1">
          CTA 1
        </NbhdCta>
      </NbhdCard>

      <NbhdCard surface="secondary">
        <NbhdImage
          slot="media"
          provider="widen"
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          cssClass="media-css-class-card-2"
          imageFocus="center"></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"
          ctaClass="cta-tracking-mtr-card2"
          ariaLabel="Learn more about Card 2">
          CTA 2
        </NbhdCta>
      </NbhdCard>

      <NbhdCard surface="secondary">
        <NbhdImage
          slot="media"
          provider="widen"
          src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
          cssClass="media-css-class-card-3"
          imageFocus="center"></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"
          ctaClass="cta-tracking-mtr-card3"
          ariaLabel="Learn more about Card 3">
          CTA 3
        </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
`introAlignment`	`intro-alignment`	`startcenterend`	`center`	Aligns the intro content inside the card list intro container.
`compact`	`compact`	`boolean`	`false`	Applies the compact layout treatment to the intro section.
`surfaceScope`	`surface-scope`	`componentintro`	`component`	Determines whether the surface styling is applied to the component container or the intro region when an intro is present.
`ctaPlacement`	`cta-placement`	`introfooter`	`intro`	Places the CTA slot in the intro section or beneath the grid as a footer action.
`gridAlignment`	`grid-alignment`	`startcenterend`	`center`	Controls the horizontal alignment of the card grid within its container.
`size`	`size`	`smallmediumlargexlarge`	`small`	Sets the card size and responsive grid density for the list.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Applies the component surface color to the card list or intro area depending on the selected scope.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjusts the top margin above the component.
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjusts the bottom margin below the component.
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`default`	Adjusts the top padding of the component or intro area.
`paddingBottom`	`padding-bottom`	`defaultnonesmallmediumlarge`	`default`	Adjusts the bottom padding of the component or intro area.

Slots

Name	Description
`(default)`	The default slot is reserved for card elements only. It accepts one card type at a time, such as `nbhd-card` or `nbhd-product-card`. Cards must be direct children of the list. Anything else, including cards inside a wrapper element and cards of a second type, is hidden. Text placed directly in the list can't be hidden and renders alongside the cards.
`eyebrow`	Optional intro eyebrow content shown above the title when the list includes an intro section.
`title`	Optional intro title content shown as the main heading for the card list.
`subtitle`	Optional supporting text displayed beneath the title in the intro area.
`content`	Optional descriptive content shown in the intro area below the subtitle.
`cta`	Optional CTA content shown in the intro area or footer depending on the `ctaPlacement` property.

CSS Parts

Name	Description
—	The root `section` element for the card list.
—	The wrapper around the intro content area when an intro is present.
—	The `nbhd-container` used for the intro content layout.
—	The intro content block that contains the eyebrow, title, subtitle, content, and optional CTA.
—	The slotted eyebrow content inside the intro area.
—	The slotted title content inside the intro area.
—	The slotted subtitle content inside the intro area.
—	The slotted content area inside the intro area.
—	The CTA slot rendered in the intro area or footer, depending on `ctaPlacement`.
—	The container that wraps the card grid.
—	The card grid container element that holds the slotted cards.
—	The footer wrapper used when the CTA is rendered beneath the grid.

nbhd-card-list::part() {
  /* your styles */
}

CSS Properties

Set these on nbhd-card-list or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-cardList-card-large`	—	`400px`
`--nbhd-cardList-card-medium`	—	`300px`
`--nbhd-cardList-card-small`	—	`200px`
`--nbhd-cardList-content-alignment`	—	`center`
`--nbhd-cardList-footer-paddingBlock`	`--nbhd-space-11 --nbhd-space-0`	`44px 0px`
`--nbhd-cardList-footer-textAlign`	—	`center`
`--nbhd-cardList-grid-bpLg-gap`	`--nbhd-space-12`	`48px`
`--nbhd-cardList-grid-display`	—	`grid`
`--nbhd-cardList-grid-gap`	`--nbhd-space-6`	`24px`
`--nbhd-cardList-grid-justifyContent`	—	`center`
`--nbhd-cardList-grid-max`	`--nbhd-cardList-card-small`	`200px`
`--nbhd-cardList-grid-position`	—	`relative`
`--nbhd-cardList-grid-zIndex`	`--nbhd-z-1`	`1`
`--nbhd-cardList-host-display`	—	`block`
`--nbhd-cardList-intro-bpLg-offset`	`--nbhd-space-25`	`100px`
`--nbhd-cardList-intro-bpLg-paddingBlockEnd`	`--nbhd-space-37`	`148px`
`--nbhd-cardList-intro-bpMd-offset`	`--nbhd-space-15`	`60px`
`--nbhd-cardList-intro-bpMd-paddingBlockEnd`	`--nbhd-space-25`	`100px`
`--nbhd-cardList-intro-offset`	`--nbhd-space-9`	`36px`
`--nbhd-cardList-intro-paddingBlockEnd`	`--nbhd-space-17`	`68px`
`--nbhd-cardList-intro-paddingBlockStart`	`--nbhd-space-6`	`24px`
`--nbhd-cardList-intro-position`	—	`relative`
`--nbhd-cardList-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-cardList-maxInlineSize`	—	`100%`
`--nbhd-cardList-paddingBlock`	`--nbhd-space-6`	`24px`

Dependencies

Child components <nbhd-card-list> renders internally. Import them too when you tree-shake.

ContainerReady <nbhd-container> TextReady <nbhd-text> CTAReady <nbhd-cta> CardReady <nbhd-card> Product CardReady <nbhd-product-card>