Skip to content

← All components

Foundation and layout

Stack

Vertical flow layout with token-based gaps.

Live example

FirstSecondThird

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Stack } from "@cofob/design-system-react";

/**
 * Complete Stack parameter reference.
 * @param gap
 *   type: "none" | "xs" | "sm" | "md" | "lg" | "xl"
 *   default: "md"
 *   example: "lg"
 * @param align
 *   type: "start" | "center" | "end" | "stretch" | "baseline"
 *   default: "stretch"
 *   example: "center"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function StackExample() {
  return (
    <Stack>Content</Stack>
  );
}

Svelte

svelte
<script lang="ts">
  import { Stack } from "@cofob/design-system-svelte";

  // Complete Stack parameter reference.
  // gap
  //   type: "none" | "xs" | "sm" | "md" | "lg" | "xl"
  //   default: "md"
  //   example: "lg"
  // align
  //   type: "start" | "center" | "end" | "stretch" | "baseline"
  //   default: "stretch"
  //   example: "center"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Stack>Content</Stack>

HTML

html
<!--
  Complete Stack parameter reference.
  gap
    type: "none" | "xs" | "sm" | "md" | "lg" | "xl"
    default: "md"
    example: "lg"
  align
    type: "start" | "center" | "end" | "stretch" | "baseline"
    default: "stretch"
    example: "center"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<div class="cf-stack">Content</div>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
gap"none" | "xs" | "sm" | "md" | "lg" | "xl""md"React · Svelte · HTML"lg"Sets token-based space between child elements.
align"start" | "center" | "end" | "stretch" | "baseline""stretch"React · Svelte · HTML"center"Controls cross-axis alignment.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.