Card List
draft

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"
    theme="light">
    Fermentum Pellentesque Malesuada
  </nbhd-text>
  <nbhd-text
    slot="title"
    tag="h2"
    variant="title"
    theme="light"
    >Neighborhood Cards</nbhd-text
  >
  <nbhd-text
    slot="subtitle"
    tag="h3"
    variant="subtitle"
    theme="light"
    >Tortor Pellentesque</nbhd-text
  >
  <nbhd-text
    slot="content"
    tag="div"
    theme="light"
    >Curabitur blandit tempus porttitor.</nbhd-text
  >
  <nbhd-cta
    slot="cta"
    variant="underlined"
    href="fun-cta-cards"
    aria-label="Learn more about CARDS"
    cssclass="cta-tracking-mtr-42"
    theme="light">
    Main CTA
  </nbhd-cta>

  <nbhd-card
    slot="cards"
    size="small"
    alignment="center"
    orientation="landscape"
    theme="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"
      theme="light">
      Card 1
    </nbhd-text>
    <nbhd-text
      slot="content"
      tag="div"
      theme="light"
      >Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text
    >
    <nbhd-cta
      slot="cta"
      variant="underlined"
      href="fun-cta-card-1"
      class="cta-tracking-mtr-card1"
      aria-label="Learn more about Card 1"
      theme="light">
      CTA 1
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card
    slot="cards"
    size="small"
    alignment="center"
    orientation="landscape"
    theme="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"
      theme="light">
      Card 2
    </nbhd-text>
    <nbhd-text
      slot="content"
      tag="div"
      theme="light"
      >Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text
    >
    <nbhd-cta
      slot="cta"
      variant="underlined"
      href="fun-cta-card-2"
      class="cta-tracking-mtr-card2"
      aria-label="Learn more about Card 2"
      theme="light">
      CTA 2
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card
    slot="cards"
    size="small"
    alignment="center"
    orientation="landscape"
    theme="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"
      theme="light">
      Card 3
    </nbhd-text>
    <nbhd-text
      slot="content"
      tag="div"
      theme="light"
      >Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text
    >
    <nbhd-cta
      slot="cta"
      variant="underlined"
      href="fun-cta-card-3"
      class="cta-tracking-mtr-card3"
      aria-label="Learn more about Card 3"
      theme="light">
      CTA 3
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card
    slot="cards"
    size="small"
    alignment="center"
    orientation="landscape"
    theme="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"
      theme="dark">
      Card 4
    </nbhd-text>
    <nbhd-text
      slot="content"
      tag="div"
      theme="dark"
      >Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text
    >
    <nbhd-cta
      slot="cta"
      variant="underlined"
      href="fun-cta-card-4"
      class="cta-tracking-mtr-card4"
      aria-label="Learn more about Card 4"
      theme="dark">
      CTA 4
    </nbhd-cta>
  </nbhd-card>

  <nbhd-card
    slot="cards"
    size="small"
    alignment="center"
    orientation="landscape"
    theme="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"
      theme="light">
      Card 5
    </nbhd-text>
    <nbhd-text
      slot="content"
      tag="div"
      theme="light"
      >Maecenas sed diam eget risus varius blandit sit amet non magna.</nbhd-text
    >
    <nbhd-cta
      slot="cta"
      variant="underlined"
      href="fun-cta-card-5"
      external=""
      class="cta-tracking-mtr-card5"
      aria-label="Learn more about Card 5"
      theme="light">
      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"
        theme="light">
        Fermentum Pellentesque Malesuada
      </NbhdText>
      <NbhdText
        slot="title"
        tag="h2"
        variant="title"
        theme="light">
        Neighborhood Cards
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle"
        theme="light">
        Tortor Pellentesque
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div"
        theme="light">
        Curabitur blandit tempus porttitor.
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="underlined"
        href="fun-cta-cards"
        aria-label="Learn more about CARDS"
        cssclass="cta-tracking-mtr-42"
        theme="light">
        Main CTA
      </NbhdCta>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        theme="primary-light">
        <NbhdImage
          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=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title"
          theme="light">
          Card 1
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div"
          theme="light">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="underlined"
          href="fun-cta-card-1"
          class="cta-tracking-mtr-card1"
          aria-label="Learn more about Card 1"
          theme="light">
          CTA 1
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        theme="primary-light">
        <NbhdImage
          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=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title"
          theme="light">
          Card 2
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div"
          theme="light">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="underlined"
          href="fun-cta-card-2"
          class="cta-tracking-mtr-card2"
          aria-label="Learn more about Card 2"
          theme="light">
          CTA 2
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        theme="primary-light">
        <NbhdImage
          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=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title"
          theme="light">
          Card 3
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div"
          theme="light">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="underlined"
          href="fun-cta-card-3"
          class="cta-tracking-mtr-card3"
          aria-label="Learn more about Card 3"
          theme="light">
          CTA 3
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        theme="primary-light">
        <NbhdImage
          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=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title"
          theme="dark">
          Card 4
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div"
          theme="dark">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="underlined"
          href="fun-cta-card-4"
          class="cta-tracking-mtr-card4"
          aria-label="Learn more about Card 4"
          theme="dark">
          CTA 4
        </NbhdCta>
      </NbhdCard>

      <NbhdCard
        slot="cards"
        size="small"
        alignment="center"
        orientation="landscape"
        theme="primary-light">
        <NbhdImage
          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=""></NbhdImage>
        <NbhdText
          class="card-title"
          tag="h4"
          slot="title"
          theme="light">
          Card 5
        </NbhdText>
        <NbhdText
          slot="content"
          tag="div"
          theme="light">
          Maecenas sed diam eget risus varius blandit sit amet non magna.
        </NbhdText>
        <NbhdCta
          slot="cta"
          variant="underlined"
          href="fun-cta-card-5"
          external=""
          class="cta-tracking-mtr-card5"
          aria-label="Learn more about Card 5"
          theme="light">
          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
prefab prefab boolean false Enable custom components for the component.
data object Content for component.
compact compact boolean false Set the component max-inline-size to --nbhd-maxInlineSize
noZoom no-zoom boolean false Turn off the hover zoom effect for card items.
reversed reversed boolean false Reverse the Card items layout.
shadow shadow boolean false Add shadow to card items.
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.
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.
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.
footer footer boolean false When enabled the main cta for the Card List will be displayed in the footer below the list of cards.
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 theme
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
theme theme primary-light | secondary-light | primary-dark | secondary-dark primary-light 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
cards array Content for card items.
cardAlignment card-alignment left | center | right center Set the alignment content for card items.
cardTheme card-theme primary-light | secondary-light | primary-dark | secondary-dark primary-light Background theme color for card items.

Data Properties

Main data properties for Card List

Property Type Description
title string Main headline content
eyebrow string Short introductory content above the title.
subtitle string Content for secondary title that is under title.
content string General content block.
cta object Call to Action data object.

Card Properties

Property Type Description
title string Card item title.
content string Card item general content block.
cta object Call to Action data object.
media object Media data object
mediaBackground boolean Set the card media image to be the background for the card item. When enabled the Card item content will not be displayed.

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.
title The main component title element.
eyebrow The main component eyebrow element.
subtitle The main component subtitle element.
content The main component content element.
cta The main component cta element.
grid The component grid listing element.
card Card element.
card-clickable Card element when clickable is enabled.
card-visual The visual container of the card.
card-image The image element of the card.
card-detail The detail container of the card.
card-title The card title element.
card-content The card content element.
card-cta The card cta element.

CSS Properties

Property Default Value
--nbhd-cardList-maxInlineSize 100%
--nbhd-cardList-textAlign center
--nbhd-cardList-header-marginBlock 0 calc(var(--nbhd-space-9) * -1)
--nbhd-cardList-header-paddingBlock var(--nbhd-space-6) var(--nbhd-space-17)
--nbhd-cardList-header-paddingInline var(--nbhd-space-6)
--nbhd-cardList-header-position relative
--nbhd-cardList-footer-marginBlock var(--nbhd-space-11) 0
--nbhd-cardList-grid-columnGap var(--nbhd-space-6)
--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)
--nbhd-cardList-grid-zIndex 1

Dependencies

This component contains the following components as dependencies.