Landscape Module
The Landscape module provides a horizontally scrollable container with optional snap points, vertical stacking, configurable gaps, and responsive alignment. It’s suitable for carousels, horizontally scrolling lists, or vertical scrollers with snap alignment.
Signature:
scss
@mixin use-landscape($gaps: ());Example:
scss
@include termeh.use-landscape(("small", "medium", "large"));Dependencies
Landscape module uses the following Termeh global var():
| Component | Type | Usage | Default |
|---|---|---|---|
gap → micro | Number | Default spacing between landscape items | 8px |
Landscape module uses the following Termeh color():
| Color / Variant | Usage | Default |
|---|---|---|
primary | Accent color for scrollbar | error |
Modifiers
.is-gapless→ removes spacing between children.is-stacked→ vertical layout with optional snap behavior.is-mandatory→ enables mandatory scroll snap points.is-center-snapped→ aligns scroll snap to center.is-end-snapped→ aligns scroll snap to end.is-<align>-align→ sets vertical alignment of children.is-<justify>-justify→ sets horizontal distribution of children.is-<gap>-gap→ applies a registered gap as spacing.is-<device>-stacked→ vertical stacking at a specific breakpoint.is-<device>-<align>-align→ responsive vertical alignment.is-<device>-<justify>-justify→ responsive horizontal distribution