Card List
Collection of card items that can contain a brief description, an image, and a call to action.
Loading
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
|
object
|
Content for component. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --neighborhood-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 cardsmedium = 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.
|
mediaCondensed
|
media-condensed
|
boolean
|
false
|
Enable additional padding around the media element. |
mediaBackground
|
media-background
|
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
Required
|
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. |
Card List Styling Properties
Available styling CSS Properties for the main Card List component.
| Property | Default Value |
|---|---|
--neighborhood-cardList-maxInlineSize
|
100% |
--neighborhood-cardList-textAlign
|
center |
--neighborhood-cardList-header-marginBlock
|
0 calc(var(--neighborhood-space-9) * -1) |
--neighborhood-cardList-header-paddingBlock
|
var(--neighborhood-space-6) var(--neighborhood-space-17) |
--neighborhood-cardList-header-paddingInline
|
var(--neighborhood-space-6) |
--neighborhood-cardList-header-position
|
relative |
--neighborhood-cardList-footer-marginBlock
|
var(--neighborhood-space-11) 0 |
--neighborhood-cardList-grid-columnGap
|
var(--neighborhood-space-6) |
--neighborhood-cardList-grid-display
|
grid |
--neighborhood-cardList-grid-gridTemplateColumns
|
repeat(1, 1fr) |
--neighborhood-cardList-grid-justifyContent
|
center |
--neighborhood-cardList-grid-position
|
relative |
--neighborhood-cardList-grid-rowGap
|
var(--neighborhood-space-6) |
--neighborhood-cardList-grid-zIndex
|
1 |
Card Styling Properties
Available styling CSS Properties for the Card element.
| Property | Default Value |
|---|---|
--neighborhood-card-boxShadow
|
none |
--neighborhood-card-blockSize
|
100% |
--neighborhood-card-display
|
flex |
--neighborhood-card-justifyContent
|
start |
--neighborhood-card-flexDirection
|
column |
--neighborhood-card-paddingBlockStart
|
0 |
--neighborhood-card-position
|
relative |
--neighborhood-card-detail-alignItems
|
start |
--neighborhood-card-detail-backgroundImage
|
none |
--neighborhood-card-detail-blockSize
|
auto |
--neighborhood-card-detail-display
|
block |
--neighborhood-card-detail-flexDirection
|
column |
--neighborhood-card-detail-inlineSize
|
auto |
--neighborhood-card-detail-insetBlockStart
|
auto |
--neighborhood-card-detail-insetInlineStart
|
auto |
--neighborhood-card-detail-justifyContent
|
flex-end |
--neighborhood-card-detail-paddingBlock
|
var(--neighborhood-space-6) |
--neighborhood-card-detail-paddingInline
|
var(--neighborhood-space-6) |
--neighborhood-card-detail-position
|
static |
--neighborhood-card-detail-textAlign
|
start |
--neighborhood-card-detail-zIndex
|
auto |
--neighborhood-card-title-color
|
var(--neighborhood-card-title-color-lightTheme) |
--neighborhood-card-title-fontSize
|
var(--neighborhood-fontSize-md) |
--neighborhood-card-title-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-card-title-lineHeight
|
var(--neighborhood-lineHeight-1-5) |
--neighborhood-card-title-marginBlock
|
0 var(--neighborhood-space-4) |
--neighborhood-card-title-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-card-title-paddingBlock
|
var(--neighborhood-space-0) |
--neighborhood-card-title-paddingInline
|
var(--neighborhood-space-0) |
--neighborhood-card-visual-aspectRatio
|
238 / 160 |
--neighborhood-card-visual-blockSize
|
auto |
--neighborhood-card-visual-inlineSize
|
auto |
--neighborhood-card-visual-insetBlockStart
|
auto |
--neighborhood-card-visual-insetInlineStart
|
auto |
--neighborhood-card-visual-marginBlock
|
0 |
--neighborhood-card-visual-marginInline
|
0 |
--neighborhood-card-visual-paddingBlock
|
0 |
--neighborhood-card-visual-paddingInline
|
0 |
--neighborhood-card-visual-position
|
static |
--neighborhood-card-visual-overflow
|
hidden |
--neighborhood-card-visual-zIndex
|
auto |
Eyebrow Styling Properties
Available styling CSS Properties for the Eyebrow element.
| Property | Default Value |
|---|---|
--neighborhood-eyebrow-color
|
var(--neighborhood-eyebrow-color-lightTheme) |
--neighborhood-eyebrow-fontFamily
|
inherit |
--neighborhood-eyebrow-fontSize
|
var(--neighborhood-fontSize-xs) |
--neighborhood-eyebrow-fontStyle
|
normal |
--neighborhood-eyebrow-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-eyebrow-letterSpacing
|
normal |
--neighborhood-eyebrow-lineHeight
|
var(--neighborhood-line-height-1-4) |
--neighborhood-eyebrow-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-2) |
--neighborhood-eyebrow-textTransform
|
none |
Title Styling Properties
Available styling CSS Properties for the Title element.
| Property | Default Value |
|---|---|
--neighborhood-title-color
|
var(--neighborhood-title-color-lightTheme) |
--neighborhood-title-fontFamily
|
inherit |
--neighborhood-title-fontSize
|
var(--neighborhood-fontSize-xl) |
--neighborhood-title-fontStyle
|
normal |
--neighborhood-title-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-title-letterSpacing
|
normal |
--neighborhood-title-lineHeight
|
var(--neighborhood-lineHeight-sm) |
--neighborhood-title-marginBlock
|
0 var(--neighborhood-space-3) |
--neighborhood-title-textTransform
|
none |
Subtitle Styling Properties
Available styling CSS Properties for the Subtitle element.
| Property | Default Value |
|---|---|
--neighborhood-subtitle-color
|
var(--neighborhood-subtitle-color-lightTheme) |
--neighborhood-subtitle-fontFamily
|
inherit |
--neighborhood-subtitle-fontSize
|
var(--neighborhood-fontSize-md) |
--neighborhood-subtitle-fontStyle
|
normal |
--neighborhood-subtitle-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-subtitle-lineHeight
|
normal |
--neighborhood-subtitle-marginBlock
|
0 var(--neighborhood-space-3) |
--neighborhood-subtitle-textTransform
|
none |
Content Styling Properties
Available styling CSS Properties for the Content element.
| Property | Default Value |
|---|---|
--neighborhood-content-color
|
inherit |
--neighborhood-content-fontFamily
|
inherit |
--neighborhood-content-fontSize
|
var(--neighborhood-fontSize-regular) |
--neighborhood-content-fontWeight
|
inherit |
--neighborhood-content-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-7) |
--neighborhood-content-textTransform
|
inherit |
CTA Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-cta-backgroundColor
|
transparent |
--neighborhood-cta-backgroundImage
|
none |
--neighborhood-cta-backgroundPosition
|
0 0 |
--neighborhood-cta-backgroundSize
|
100% |
--neighborhood-cta-borderColor
|
transparent |
--neighborhood-cta-borderRadius
|
2px |
--neighborhood-cta-borderStyle
|
solid |
--neighborhood-cta-borderWidth
|
2px |
--neighborhood-cta-color-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-color-hover-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-hover-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-cursor
|
pointer |
--neighborhood-cta-display
|
inline-block |
--neighborhood-cta-fontFamily
|
var(--neighborhood-link-fontStack) |
--neighborhood-cta-fontSize
|
var(--neighborhood-fontSize-xxs) |
--neighborhood-cta-fontStyle
|
normal |
--neighborhood-cta-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-cta-letterSpacing
|
var(--neighborhood-letterSpacing-2) |
--neighborhood-cta-paddingBlock
|
var(--neighborhood-space-3) |
--neighborhood-cta-paddingInline
|
var(--neighborhood-space-9) |
--neighborhood-cta-position
|
relative |
--neighborhood-cta-textAlign
|
center |
--neighborhood-cta-textDecoration
|
none |
--neighborhood-cta-textDecorationThickness
|
auto |
--neighborhood-cta-textDecorationThickness-hover
|
auto |
--neighborhood-cta-textDecorationColor
|
inherit |
--neighborhood-cta-textTransform
|
uppercase |
--neighborhood-cta-textUnderlineOffset
|
auto |
--neighborhood-cta-transitionFunction
|
ease-in-out |
--neighborhood-cta-transitionDuration
|
0.2s |
--neighborhood-cta-transitionProperty
|
background-color, color, text-decoration |
CTA Underlined Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-ctaUnderlined-backgroundImage
|
none |
--neighborhood-ctaUnderlined-backgroundColor
|
transparent |
--neighborhood-ctaUnderlined-borderColor
|
transparent |
--neighborhood-ctaUnderlined-borderRadius
|
0 |
--neighborhood-ctaUnderlined-borderWidth
|
1px |
--neighborhood-ctaUnderlined-fontSize
|
var(--neighborhood-fontSize-xs) |
--neighborhood-ctaUnderlined-letterSpacing
|
var(--neighborhood-letterSpacing-regular) |
--neighborhood-ctaUnderlined-paddingBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-3) |
--neighborhood-ctaUnderlined-paddingInline
|
var(--neighborhood-space-0) |
--neighborhood-ctaUnderlined-textDecorationThickness
|
2px |
--neighborhood-ctaUnderlined-textDecorationThickness-hover
|
5px |
--neighborhood-ctaUnderlined-textDecorationStyle
|
solid |
--neighborhood-ctaUnderlined-textUnderlineOffset
|
var(--neighborhood-space-025) |
--neighborhood-ctaUnderlined-textTransform
|
none |
--neighborhood-ctaUnderlined-transitionProperty
|
all |
--neighborhood-ctaUnderlined-transitionDuration
|
0.1s |