Root Classes
Card
Outline card
Clickable Card
Clickable Outline Card
Utility Classes
Template
[Card Style] + [Scale Factor] + [Background Color]
CSS Example
.card
.scaleFactor__heading
.bg__infoContainer
Glossary
| Term | Definition | Examples |
|---|---|---|
| Card Style | Whether the card uses the "default" or "outline" style. Default does not require a modifier, so you can simply use .card |
|
| Scale Factor | The largest font size contained within the card. LiftKit uses this value to provide optical corrections to card padding symmetry. |
|
| Background Color | The fill color of the card. Will also set the corresponding text color. See Color for list of options. |
|
Example Implementations
Default Cards
Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
Overline
Outlined Cards
Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
Overline
Default Link Cards
Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
Overline
Outlined Link Cards
Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
Overline
Components
These components deliberately have more elements than necessary for most use cases.This was done to make them faster to implement. It's quicker to delete elements you don't need than to drag in new ones. So, the recommended use for these is to quickly place an instance and then immediately detach it. From there, you can delete elements as needed.
.card
.scaleFactor__heading
.bg-light__surfaceContainerLowest
Quote highlight should go up on top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.card__link
.scaleFactor__heading
.bg-light__surfaceContainerLowest
Quote highlight should go up on top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Quote highlight should go up on top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.card__outline__link
.scaleFactor__heading
Quote highlight should go up on top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.card__quote
.scaleFactor__heading
Quote highlight should go up on top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.