Source: dist/css/library_boot.css, line 7147
9 Subs
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone but are composed into larger, reusable structures.
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,
or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials
({{> 'Sub.X' }}
) to render dynamic or variable content within patterns.
Common use cases:
- {{> 'Sub.Sub.Data.Duration'}}
— Displays session duration
-
{{> 'Sub.Credit' modifier_class='CME'}}
— Outputs a credit tag with a modifier
-
{{> 'Sub.ActionButtons.Favorite'}}
— Interactive favorite/save button
Naming Convention:
Sub.Type.Name
— Organized by category (e.g., Data
,
Credit
, ActionButtons
, ClassList
)