Box

Flat surface affordance. Generous padding, modest corner radius, a tier-small drop-shadow lifts it off the page. Tracks --kc-bg / --kc-fg by default; opts into brand-pinned surfaces via the shared .is-* combinations, with .is-light soft-tint companions for body-copy density.

Live

<div class="box">
<p style="margin: 0;">Default surface. Nested <a href="#docs">anchors</a> inherit currentColor.</p>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-box')
);

<div style="display: grid; gap: 0.75rem;">
<div class="box is-primary"><p style="margin: 0;">Primary surface. <a href="#">Link</a>.</p></div>
<div class="box is-warning"><p style="margin: 0;">Warning surface. <a href="#">Link</a>.</p></div>
<div class="box is-danger"><p style="margin: 0;">Danger surface. <a href="#">Link</a>.</p></div>
<div class="box is-success"><p style="margin: 0;">Success surface. <a href="#">Link</a>.</p></div>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-box')
);

<div style="display: grid; gap: 0.75rem;">
<div class="box is-primary is-light"><p style="margin: 0;">Primary soft-tint surface.</p></div>
<div class="box is-warning is-light"><p style="margin: 0;">Warning soft-tint surface.</p></div>
<div class="box is-danger is-light"><p style="margin: 0;">Danger soft-tint surface.</p></div>
<div class="box is-success is-light"><p style="margin: 0;">Success soft-tint surface.</p></div>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-box')
);

Markup

<!-- Default: tracks --kc-bg / --kc-fg, follows the active theme. -->
<div class="box">
  <p>Surface content. Nested <a href="#">anchors</a> inherit currentColor.</p>
</div>

<!-- Brand-pinned surface via shared .is-* combinations. -->
<div class="box is-primary">
  <p>Primary surface. Links pin to the surface fg for contrast safety.</p>
</div>

<!-- Soft-tint companion via .is-light. -->
<div class="box is-danger is-light">
  <p>Soft danger surface — same hue, calibrated for body copy.</p>
</div>

When to use

• Reach for Box when you need a flat single-content surface with subtle elevation — callouts, summary tiles, grouped UI without a header / footer structure.
• Reach for the .is-* combinations when the surface itself carries semantic meaning (e.g. a danger box around a destructive action summary).
• Pair .is-<combination>.is-light for body-copy-dense surfaces where the full-strength brand colour would fight the prose.
• When the surface has internal regions (header bar, media slot, actions strip), reach for Card — its .card__header, .card__image, .card__content, .card__footer subparts give you the structural vocabulary. For full-bleed page bands, prefer Section.

Accessibility

• Nested anchors inherit the surface foreground (color: currentColor), so links on themed .is-* surfaces stay contrast-safe — the page-level --kc-link is calibrated against the page bg, not the surface bg. Same rationale as Footer and Alert.
• Under forced-colors: active the drop-shadow is dropped by the system; the plugin adds an explicit 1px solid CanvasText border so the surface boundary stays visible (WCAG 1.4.11).

Variables

See Combinations and light variants for $enable-light, $default-combination, and $controls — cross-cutting plumbing common to every theme-aware component.

Override example

@use '@adnap/krysalicss/element/box' with (
  $selector: '.surface',
  $padding: 2rem,
  $border-radius: 12px,
  $shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
);

Tokens consumed