Skip to main content

Card

A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card. Within the Astro system, card sits on top of a container.

Anatomy
Anatomy Image
  1. Outer Container
    2. Header
  2. Prefix Slot (Optional)
  3. Title
  4. Header Container
  5. Suffix Slot (Optional)
    6. Body
  6. Content Slot (Default)
    7. Footer
  7. Footer Slot (Optional)
  8. Footer Container

Default
Attribute Token Value
Container
Box Shadow card-shadow 0px 4px 4px 1px rgba(0, 0, 0, 0.45)
Border Width card-border-width 1px
Border Color card-color-border #51555b
Background Color card-color-background #101923
Header
Padding (Top and Bottom) card-header-padding-y 0.625rem
Padding (Left and Right) card-header-padding-x 0.5rem
Font Size font-heading-3-font-size 1.25rem
Font Family font-heading-3-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Weight font-heading-3-font-weight 500
Line Height font-heading-3-line-height calc(24 / 20)
Letter Spacing font-heading-3-letter-spacing 0.0015em
Body
Padding card-body-padding 0.5rem

With Prefix
Attribute Token Value
Header
Dimension card-header-prefix-dimension 24px
Margin (Right) card-header-prefix-margin-right 0.5rem

With Suffix
Attribute Token Value
Header
Dimension card-header-suffix-dimension 24px
Margin (Left) card-header-suffix-margin-left 0.5rem
Attribute Token Value
Footer
Padding card-footer-padding 0.5rem
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel