Examples · Foreseeable

Essentials Examples

Variant: EssentialsShows: 15 data states · S · M · L
01

Permutations

15 data states · S·M·L · LM·DM
Data-state permutations
Essentials: Essentials (base)
Essentials (base)
Essentials: + Subtitle
+ Subtitle
Essentials: + Subtitle - 2 Supporting
+ Subtitle · 2 Supporting
Essentials: + Subtitle - Supporting - Footnote
+ Subtitle · Supporting · Footnote
Essentials: + Listing Description
+ Listing Description
Essentials: + Subtitle - 2 Supporting - Footnote
+ Subtitle · 2 Supporting · Footnote
Essentials: + Subtitle - Listing Description
+ Subtitle · Listing Description
Essentials: + Subtitle - 2 Supporting - Button
+ Subtitle · 2 Supporting · Button
Essentials: + Listing Description - Footnote
+ Listing Description · Footnote
Essentials: + Subtitle - Supporting - Listing Description
+ Subtitle · Supporting · Listing Description
Essentials: + Subtitle - Listing Description - Footnote
+ Subtitle · Listing Description · Footnote
Essentials: + Subtitle - Supporting - Listing Description - Footnote
+ Subtitle · Supporting · Listing Description · Footnote
Essentials: + Subtitle - Supporting - Listing Description - Button
+ Subtitle · Supporting · Listing Description · Button
Essentials: + Subtitle - Supporting - Listing Description - Button - Footnote
+ Subtitle · Supporting · Listing Description · Button · Footnote
Essentials: + Subtitle - 2 Supporting - Listing Description - Button - Footnote
+ Subtitle · 2 Supporting · Listing Description · Button · Footnote
Notes
  • Ordering is fixed: Eyebrow → Primary → Secondary → Supporting I → Supporting II → Listing Description → Button → Footnote.
  • Spacing follows the slot model: top 12px, interior 8px, bottom terminal-slot dependent.
  • Size is the type ramp.
Events · Cards · Foreseeable · Essentials · Examples
The Essentials data states at all three sizes and in both modes. The order and spacing are fixed; optional slots switch on per card.