Card List | Components | Neighborhood Design System

Example

Selected Brand

Loading

Code

HTML

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

<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" cta-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" cta-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" cta-class="cta-tracking-mtr-card3"
      aria-label="Learn more about Card 3">
      CTA 3
    </nbhd-cta>

  </nbhd-card>

</nbhd-card-list>

React

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`	`start \| center \| end`	`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`	`component \| intro`	`component`	Determines whether the surface styling is applied to the component container or the intro region when an intro is present.
`ctaPlacement`	`cta-placement`	`intro \| footer`	`intro`	Places the CTA slot in the intro section or beneath the grid as a footer action.
`gridAlignment`	`grid-alignment`	`start \| center \| end`	`center`	Controls the horizontal alignment of the card grid within its container.
`size`	`size`	`small \| medium \| large \| xlarge`	`small`	Sets the card size and responsive grid density for the list.
`surface`	`surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Applies the component surface color to the card list or intro area depending on the selected scope.
`marginTop`	`margin-top`	`none \| small \| medium \| large`	`none`	Adjusts the top margin above the component.
`marginBottom`	`margin-bottom`	`none \| small \| medium \| large`	`none`	Adjusts the bottom margin below the component.
`paddingTop`	`padding-top`	`default \| none \| small \| medium \| large`	`default`	Adjusts the top padding of the component or intro area.
`paddingBottom`	`padding-bottom`	`default \| none \| small \| medium \| large`	`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, and unsupported content is hidden and reported to the console.
`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
`base`	The root `section` element for the card list.
`intro-wrapper`	The wrapper around the intro content area when an intro is present.
`intro-container`	The `nbhd-container` used for the intro content layout.
`intro`	The intro content block that contains the eyebrow, title, subtitle, content, and optional CTA.
`eyebrow`	The slotted eyebrow content inside the intro area.
`title`	The slotted title content inside the intro area.
`subtitle`	The slotted subtitle content inside the intro area.
`content`	The slotted content area inside the intro area.
`cta`	The CTA slot rendered in the intro area or footer, depending on `ctaPlacement`.
`grid-container`	The container that wraps the card grid.
`grid`	The card grid container element that holds the slotted cards.
`footer`	The footer wrapper used when the CTA is rendered beneath the grid.

CSS Properties

Property	Default Value
`--nbhd-cardList-host-display`	block
`--nbhd-cardList-content-alignment`	center
`--nbhd-cardList-marginInline`	0
`--nbhd-cardList-maxInlineSize`	100%
`--nbhd-cardList-paddingBlock`	24px
`--nbhd-cardList-intro-offset`	36px
`--nbhd-cardList-intro-paddingBlockStart`	24px
`--nbhd-cardList-intro-paddingBlockEnd`	68px
`--nbhd-cardList-intro-position`	relative
`--nbhd-cardList-footer-paddingBlock`	44px 0
`--nbhd-cardList-footer-textAlign`	center
`--nbhd-cardList-grid-display`	grid
`--nbhd-cardList-grid-gap`	24px
`--nbhd-cardList-grid-max`	200px
`--nbhd-cardList-grid-justifyContent`	center
`--nbhd-cardList-grid-position`	relative
`--nbhd-cardList-grid-zIndex`	1
`--nbhd-cardList-card-small`	200px
`--nbhd-cardList-card-medium`	300px
`--nbhd-cardList-card-large`	400px
`--nbhd-cardList-grid-bpLg-gap`	48px
`--nbhd-cardList-intro-bpMd-offset`	60px
`--nbhd-cardList-intro-bpMd-paddingBlockEnd`	100px
`--nbhd-cardList-intro-bpLg-offset`	100px
`--nbhd-cardList-intro-bpLg-paddingBlockEnd`	148px

Dependencies

This component contains the following components as dependencies.

Card List ready

Example

Code

HTML

React

Image Dimensions

Properties

Slots

CSS Parts

CSS Properties

Dependencies

Card List
ready