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.

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

Signature:

@mixin use-landscape($gaps: ());

Example:

@include termeh.use-landscape(("small", "medium", "large"));

Module:

This module is registered as landscape in the presented modules.

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