Card Module

The Card module provides a flexible container with sections, overlays, and decorators. It supports colors, gaps, sizes, and state modifiers such as loading and overlay.

Header

Default Card

Footer

lorem...

lorem...

This is an overlay

Signature:

@mixin use-card($colors: (), $gaps: ());

Example:

@include termeh.use-card(("primary", "danger"), ("macro", "small"));

Module:

This module is registered as card in the presented modules.

Dependencies

Card module uses the following Termeh global var():

Component	Type	Usage	Default
base → color	Color	Fallback background and overlay	white
base → foreground	Color	Fallback foreground and overlay spinner color	black
base → section	Color	Secondary section background	null
base → separator	Color	Separator background	null
box → background	Color	Card background and overlay fallback background	FALLBACK
box → foreground	Color	Card foreground and overlay fallback spinner color	FALLBACK
box → shadow	List	Default box shadow	null
box → sizes	List	Default box sizes	()
gap → macro	Number	Default card padding and bottom margin	1.6em
radius → normal	Number	Default border-radius	null
decorator → size	Number	Loading spinner thickness	2px
decorator → spinner	Number	Loading spinner size	2em
overlay → background	Color	Overlay background color	FALLBACK
overlay → foureground	Color	Overlay foreground	FALLBACK
overlay → opacity	Number	Overlay background opacity	0.85
overlay → filter	String	Overlay backdrop filter	null

---

Card module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
shade	Default decorator color	error
primary	Default scrollbar accent color	error

Modifiers Classes

• .is-loading → adds a loading state
• .is-overlaid → displays an overlay element
• .is-top-decorated → adds a top border decoration
• .is-bottom-decorated → adds a bottom border decoration
• .is-<gap>-gap → applies a predefined spacing value
• .is-<color> → applies a predefined accent color
• .is-<size> → applies a predefined box size (default card width)

Child Elements

• .separator → horizontal divider line
• .section → content block inside a card
• .overlay → overlay container, shown when the card has .is-overlaid; must be placed as the last child of the card

Section Modifiers

• .is-header → header section, fixed to the top with adjusted margin
• .is-footer → footer section, fixed to the bottom with adjusted margin
• .is-secondary → applies section background styling
• .top-sticky → sticks the section to the top of the card
• .bottom-sticky → sticks the section to the bottom of the card

Separator Modifiers

• .is-attached → full-width divider with no margin