Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Card component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping needed.
  3. Once the component is located, click and drag it into the frame/artboard.
  4. Cards are like Legos, add as many of the card components needed.

How to use

  1. Place the card/container as the bottom layer of your card.
  2. Toggle the grid layout on/off by using the following shortcut:
    • Mac: Control + G
    • PC: Ctrl + Shift + 4
  3. Align the card to fit within the grid applied to your frame/artboard.
  4. Stack additional card components above the card/container, making sure to follow the grid within the card/container.
    • Rich media/Leading image is always full width and ignores the card's innner grid.
    • All Title and Action blocks are only to be resized in width, not height.
  5. Select all the Card layers and convert them to a frame/artboard by using the following shortcut:
    • Mac: Command + Option + G
    • PC: Ctrl + ALT + G
  6. Make sure to name the new group.
  7. Locate the Design tab in the Inspector Panel.
  8. Under the Constraints section, set up constraints.

API

Card

PropertyTypeRequiredDefaultDescription
variantEnum
'default' │ 'info' │ 'warning' │ 'danger'
falsedefault
onClickFuncfalseundefined
classNameStringfalse[Empty String]@ignore
childrenNodefalseundefined@ignore

CardHeader

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodefalseundefined@ignore

CardHeaderTitle

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodefalseundefined@ignore

CardMedia

PropertyTypeRequiredDefaultDescription
fullWidthBoolfalsefalse
classNameStringfalse[Empty String]@ignore
childrenNodefalseundefined@ignore

CardActions

PropertyTypeRequiredDefaultDescription
metaStringfalse[Empty String]
alignRightBoolfalsefalse
classNameStringfalse[Empty String]@ignore
childrenNodefalseundefined@ignore
Edit this page on GitHub