Card
draft

in progress...

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"
    theme="dark"
    >Card Title</nbhd-text
  >
  <nbhd-text
    slot="content"
    tag="div"
    theme="dark"
    >Donec ullamcorper nulla non metus auctor fringilla.</nbhd-text
  >
  <nbhd-cta
    slot="cta"
    variant="underlined"
    href="fun-test-link"
    class=""
    aria-label=""
    theme="dark">
    Some Random Link
  </nbhd-cta>
</nbhd-card>

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"
        theme="dark">
        Card Title
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div"
        theme="dark">
        Donec ullamcorper nulla non metus auctor fringilla.
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="underlined"
        href="fun-test-link"
        class=""
        aria-label=""
        theme="dark">
        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 true 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 left 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.
theme theme primary-light | primary-dark | secondary-light | secondary-dark primary-light The theme of the card.

Slots

Name Description
title Card title area.
media Card media area.
content Card content area.
cta Card cta area.

CSS Parts

Name Description
base The main wrapper element.
visual The visual container
media The media element.
detail The detail container.
title The title element.
content The content element.
cta The cta element.

CSS Properties

Property Default Value
--nbhd-card-boxShadow none
--nbhd-card-blockSize 100%
--nbhd-card-display flex
--nbhd-card-justifyContent start
--nbhd-card-flexDirection column
--nbhd-card-paddingBlockStart 0
--nbhd-card-position relative
--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)
--nbhd-card-detail-paddingInline var(--nbhd-space-6)
--nbhd-card-detail-position static
--nbhd-card-detail-textAlign start
--nbhd-card-detail-zIndex auto
--nbhd-card-title-color var(--nbhd-card-title-color-lightTheme)
--nbhd-card-title-fontSize var(--nbhd-fontSize-md)
--nbhd-card-title-fontWeight var(--nbhd-fontWeight-700)
--nbhd-card-title-lineHeight var(--nbhd-lineHeight-1-5)
--nbhd-card-title-marginBlock 0 var(--nbhd-space-4)
--nbhd-card-title-marginInline var(--nbhd-space-0)
--nbhd-card-title-paddingBlock var(--nbhd-space-0)
--nbhd-card-title-paddingInline var(--nbhd-space-0)
--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 0
--nbhd-card-visual-marginInline 0
--nbhd-card-visual-paddingBlock 0
--nbhd-card-visual-paddingInline 0
--nbhd-card-visual-position static
--nbhd-card-visual-overflow hidden
--nbhd-card-visual-zIndex auto

Dependencies

This component contains the following components as dependencies.