Hero Image

Components

Card

Play around with props, edit and copy code.

Properties

Card

Prop nameTypeDefault ValueDescription
brandingenum'neutral'Set branding
disabledboolfalseIf card should be disabled
expandableboolfalseif card is expandable
isInitalExpandedboolfalseif card is expandable, sets the cards initial state to expanded or collapsed.
childrennodeContent
classNamestringAdd custom class
expandableListboolif card is expandable in a list. Expanded cards will separate from other card like an accordion.
onChangefuncOn change handler function called with (event, isExpanded) (For controlled component)

CardBody

Prop nameTypeDefault ValueDescription
centerboolUse to get center content
childrennodeContent
classNamestringAdd custom class

CardHeader

Prop nameTypeDefault ValueDescription
expandableboolfalse
alignenum
childrennode
classNamestring
expandedbool
handleChangefunc

CardFooter

Prop nameTypeDefault ValueDescription
alignenum
childrennode
classNamestring

CardImage

Prop nameTypeDefault ValueDescription
alt *stringAlt text for image
childrennodeContent
classNamestringCustom classname
fontColorstringAny svs color available in trinidad-ui colors
imageHeightstringHeight of image
positionenum
src *stringSrc to image

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.