Fusion templates

UI components

Live reference for Input, Text, Card, and Dropdown. Styles use global.css tokens — toggle dark mode to verify both themes.

Input

Single-line control with default, hover, focus, disabled, and invalid states.

Usage

{{<fusion.input
  name="email"
  label="Email"
  type="email"
  placeholder="you@example.com"
/>}}

{# Invalid #}
{{<fusion.input name="email" label="Email" invalid={true} hint="Enter a valid email" />}}

{# Include styles #}
<link rel="stylesheet" href="components/input/input.css" />

Default

{{<fusion.input name="email" label="Email" placeholder="you@example.com" />}}

Hover / Focus

{{<fusion.input name="username" label="Username" value="ada.lovelace" />}}

Disabled

{{<fusion.input name="api_key" label="API key" value="…" disabled={true} />}}

Error / invalid

Enter a valid email

{{<fusion.input name="email" label="Email" invalid={true} hint="Enter a valid email" />}}

Text

Multi-line textarea with the same border, radius, and state language as Input.

Usage

{{<fusion.text
  name="bio"
  label="Bio"
  placeholder="Tell us about yourself…"
  rows={4}
/>}}

<link rel="stylesheet" href="components/text/text.css" />

Default

{{<fusion.text name="bio" label="Bio" rows={4} />}}

Hover / Focus

{{<fusion.text name="description" label="Description" value="…" />}}

Disabled

{{<fusion.text name="locked" label="Locked notes" disabled={true} />}}

Error / invalid

Minimum 20 characters

{{<fusion.text name="feedback" label="Feedback" invalid={true} hint="Minimum 20 characters" />}}

Card

Optional image, title, and subtitle slots. Missing slots are not rendered — layout collapses without empty gaps.

Usage

{{<fusion.card image="/hero.jpg" />}}
{{<fusion.card title="Project Atlas" />}}
{{<fusion.card title="Project Atlas" subtitle="Edge-ready APIs" />}}
{{<fusion.card
  image="/hero.jpg"
  title="Project Atlas"
  subtitle="Edge-ready APIs"
  image_alt="Atlas cover"
/>}}

<link rel="stylesheet" href="components/card/card.css" />

Image only

{{<fusion.card image="/hero.jpg" />}}

Title only

Project Atlas

{{<fusion.card title="Project Atlas" />}}

Title + subtitle

Project Atlas

Edge-ready APIs for modern teams

{{<fusion.card title="Project Atlas" subtitle="Edge-ready APIs for modern teams" />}}

Image + title + subtitle

Atlas cover

Project Atlas

Edge-ready APIs for modern teams

{{<fusion.card
  image="/hero.jpg"
  title="Project Atlas"
  subtitle="Edge-ready APIs for modern teams"
/>}}

Dropdown

Select-style trigger with popover menu — default, open, disabled, and invalid states.

Usage

{{<fusion.dropdown
  name="role"
  label="Role"
  placeholder="Pick a role"
  options={roles}
/>}}

<link rel="stylesheet" href="components/dropdown/dropdown.css" />
<script src="components/dropdown/dropdown.js"></script>

Default

{{<fusion.dropdown name="role" label="Role" placeholder="Pick a role" options={roles} />}}

Selected / open

{{<fusion.dropdown name="plan" label="Plan" value="pro" options={plans} />}}

Disabled

{{<fusion.dropdown name="region" label="Region" value="us-east-1" disabled={true} />}}

Error / invalid

Workspace is required

{{<fusion.dropdown name="workspace" label="Workspace" invalid={true} hint="Workspace is required" options={ws} />}}