Foundation and layout

Inline

Wrapping horizontal layout with alignment controls.

Live example

OneTwoThree

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

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

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

Svelte

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

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

<Inline>Content</Inline>

HTML

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

Contract

CSS selector	`.cf-inline`
Adapters	Native · React · Svelte
Primary props	gap · align · justify · wrap · children
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

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

Parameter	Type	Default	Adapters	Example	Description
`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"`	`"center"`	React · Svelte · HTML	`"center"`	Controls cross-axis alignment.
`justify`	`"start" \| "center" \| "end" \| "between"`	`"start"`	React · Svelte · HTML	`"between"`	Controls main-axis distribution.
`wrap`	`boolean`	`true`	React · Svelte · HTML	`true`	Allows inline children to wrap on narrow viewports.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.