Skip to main content

Anatomy

Anatomy Image
  1. Outer Container
  2. Header
  3. Prefix Slot (Optional)
  4. Title
  5. Header Container
  6. Suffix Slot (Optional)
  7. Body
  8. Content Slot (Default)
  9. Footer
  10. Footer Slot (Optional)
  11. 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

Request Access to Source Code Repository

The source code Git repository and other useful documentation for Astro’s apps are hosted on Github.com. Please fill out the form below to request access.

How Would You Like to Use Astro’s Source Code?
Which Astro App’s Source Code Would You Like Access to?
Successfully submitted request for source code