Stripe

A decorative accent stripe for lightweight grouping and section framing.

Supporting primitive

Use fd-stripe when a small color-coded accent helps users scan grouped content faster. The surrounding heading, copy, and layout still carry the meaning; the stripe is decorative support only.

When to use

• Heading accents — above or beside a heading when you want a lightweight visual cue for a section.
• Grouped supporting content — to reinforce that related cards, summaries, or checklist content belong together.
• Repeatable decorative framing — when teams need the FDIC stripe treatment without recreating one-off CSS.

When not to use

• Semantic document separation — use real structure, spacing, or native separators when the boundary itself needs meaning.
• Interactive or stateful UI — fd-stripe is not clickable, selectable, dismissible, or focusable.
• Color-only communication — if the stripe is the only clue that a section matters, the pattern is too weak on its own.

Examples

Tone variants and heading composition. Open Storybook for the focused playground and in-context examples. View in Storybook →

Properties

Name	Type	Default	Description
type	"neutral" | "cool" | "warm"	neutral	Visual tone for the decorative stripe.

CSS custom properties

Name	Default	Description
--fd-stripe-width	80px	Rendered stripe width. The component clamps to the available container width.
--fd-stripe-height	4px	Rendered stripe thickness.
--fd-stripe-radius	0	Corner radius for the stripe.
--fd-stripe-bg-neutral	var(--fdic-color-border-divider, var(--fdic-border-divider, #bdbdbf))	Neutral stripe color.
--fd-stripe-bg-cool	var(--fdic-color-info-100, #38b6ff)	Cool stripe color.
--fd-stripe-bg-warm	var(--fdic-color-secondary-500, #d9af45)	Warm stripe color.

Shadow parts

Name	Description
stripe	Internal decorative line element.

• fd-stripe stays decorative-only in v1 and sets aria-hidden="true" on the host.
• Use surrounding headings or landmarks for structure; the stripe itself is not a semantic separator.

Best practices

Do

Let text and structure carry the meaning

The stripe should reinforce grouping, not replace headings, landmarks, or explanatory copy.

Don't

Treat the stripe like a rule with semantics

If the separator itself needs to be announced or understood structurally, choose a semantic pattern instead.

Do

Keep the accent compact

The default 80 by 4 geometry matches the Figma primitive and stays intentionally lightweight.

Don't

Rely on tone alone

Warm, neutral, and cool help scanning, but nearby visible labels still need to explain what is grouped.

Composition guidance

• Place fd-stripe near the heading or summary it supports instead of leaving it isolated.
• Use neutral as the baseline tone. Reserve cool and warm for intentional visual emphasis that still has nearby text context.
• Prefer CSS custom properties for layout-level overrides instead of stretching the public API with width or height attributes.

<section>
  <fd-stripe type="cool"></fd-stripe>
  <h2>Account activity</h2>
  <p>Review recent deposits, withdrawals, and scheduled transfers.</p>
</section>

Accessibility

• fd-stripe is decorative-only in v1 and sets aria-hidden="true" on the host.
• The component exposes no keyboard interaction, no focus target, and no semantic separator role.
• Do not rely on the stripe alone to communicate category, status, or section importance.
• Forced-colors mode preserves a visible line using system colors.

Known limitations

• fd-stripe does not provide an announced structural separator in v1.
• The component has no slots, events, labels, or interactive states.
• Geometry overrides are styling hooks only; there are no public width or height attributes.

Related components

• Visual — use when the decorative accent should be a compact shaped surface instead of a line.
• Badge — use when the compact surface must include visible text.
• Alert — use when the accent must pair with semantic messaging, states, and recovery guidance.