Card

Definition: A card is a container that displays relevant information. It often includes a title, description, image or additional elements like buttons or icons.

 

content
#252626
#c3d0d9
text-default
Default text refers to the main or prominent textual content. Suitable for important headlines, titles, or primary information that requires the most attention.
#494a4a
#c3d0d9
text-secondary
Secondary text is for supporting or supplementary information. Often used for descriptions, labels, captions, or any content that is less significant than the default text but still relevant to the user experience.
#116fae
#419bd7
text-emphasis
Emphasized text refers to a styling technique used to give importance to a specific text. Often used to draw attention to key points, important information, or to differentiate specific content from the rest of the text.
#8a8a8a
#9aa5ae
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
#494a4a
#e4ebf0
icon-default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
#1482cc
#419bd7
icon-emphasis
emphasis icon refers to an icon that is designed to draw attention and clearly indicates its interactive nature.
#8a8a8a
#9aa5ae
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
#ffffff
#2b3033
surface-enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
#f2f2f2
rgba(76,84,91,0.24)
surface-muted
Muted surface indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
#ffffff
#2b3033
surface-transparent
Transparent surface is intented to create a subtle and understated appearance. Suitable for the less important ui control.
#8a8a8a
#6f7a82
border-enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
#ffffff
#ffffff
border-transparent
Transparent border is intented to create a subtle and understated appearance. Suitable for the less important ui control.
0 2px 4px 0 rgba(37,38,38,0.08)
0 2px 4px 0 rgba(0,0,0,0.12)
shadow / default-elevation-1