Tile

The Tile component presents one primary destination with a decorative circular icon, optional supporting description, and an optional stack of related links.

Component

Use fd-tile when people need to scan a short summary and move to the right destination quickly. The tile keeps the overall shell static while the primary destination remains a native link that spans the decorative visual and main text summary.

When to use

• One primary destination with lightweight supporting context — a tile works well when the main title is the first link people should notice.
• Small groups of related follow-up links — use the optional supporting links when the tile needs a few tightly related destinations, not a full navigation menu.
• Decorative icon grouping — the internal visual helps scanning, but it stays decorative and does not replace the visible text.

When not to use

• Do not use Tile as a giant clickable card — the primary destination spans the visual and summary, but the full tile shell is not a blanket action surface in v1.
• Do not use it for selection, toggling, or dismissal — Tile owns layout only, not interactive state.
• Do not use more than four supporting links — if the content needs deeper navigation, move to a broader list or page-level navigation pattern.

Examples

Tile keeps the shell static while its responsive sizing grows from compact to larger layouts. Open Storybook to inspect the property-driven link stack and tone options. View in Storybook →

Basic usage

<fd-tile
  id="benefits-tile"
  tone="cool"
  icon-name="download"
  title="Benefits"
  href="/benefits"
  description="Review insurance, leave, and retirement resources in one place."
></fd-tile>

<script type="module">
  const tile = document.getElementById("benefits-tile");

  tile.links = [
    { label: "Plan overview", href: "/benefits/overview" },
    { label: "Enrollment deadlines", href: "/benefits/deadlines" },
  ];
</script>

Markup-first supporting links

Use the supporting-link slot when a CMS or server-rendered page can author plain anchors more reliably than setting the JavaScript links property.

<fd-tile
  tone="cool"
  icon-name="download"
  title="Benefits"
  href="/benefits"
  description="Review insurance, leave, and retirement resources in one place."
>
  <a slot="supporting-link" href="/benefits/overview">Plan overview</a>
  <a slot="supporting-link" href="/benefits/deadlines">Enrollment deadlines</a>
</fd-tile>

Implementation guide

• Keep the tile shell non-interactive. The component renders a static article wrapper. Navigation belongs to the rendered native links, with the primary destination spanning the visual plus the title/description summary.
• Treat the visual as decorative. icon-name selects the decorative icon inside the internal fd-visual. The icon is excluded from assistive technology, even when it sits inside the primary link hit area.
• Use visual-type="avatar" for editorial identity snippets. This keeps the tile layout while switching the decorative visual to the avatar placeholder treatment.
• Use fd-tile-list to set a shared grouped tone. A standalone tile can choose its own tone, but direct children of fd-tile-list inherit the list's tone so one set cannot mix visual types. Tile visuals use the same rest and hover tone surfaces as fd-event.
• Set links as a JavaScript property. Supporting links are structured data, not an HTML string or JSON attribute. This keeps the rendered link list predictable and avoids fragile parsing contracts.
• Use slotted anchors for server-rendered authoring. When links has no valid entries, fd-tile reads up to four plain anchors assigned to slot="supporting-link" and renders them through the same internal supporting-link list. Do not slot buttons, lists, cards, or nested navigation.
• Prefer one source for supporting links. If the links property has valid entries, it takes precedence over slotted supporting-link anchors so one tile cannot render two competing supporting-link stacks.
• Limit supporting links to closely related destinations. The component renders at most the first four valid link objects. If the content needs more destinations, use a broader content list or page navigation instead of overloading one tile.
• Let the component size itself responsively. fd-tile uses container queries internally, so the same API can render the small, medium, and large Figma family without a public size variant.

Properties

Name	Type	Default	Description
tone	"neutral" | "cool" | "warm"	neutral	Decorative visual tone passed to the internal fd-visual.
visual-position	"left" | "top"	"left"	Position of the decorative visual relative to the primary link text.
icon-name	string | undefined	undefined	Optional Phosphor registry icon name rendered inside the decorative visual. When omitted, fd-visual falls back to its built-in archive glyph.
title	string	``	Visible primary text for the tile.
href	string | undefined	undefined	Optional destination for the primary title. When omitted, the title renders as plain text.
target	string | undefined	undefined	Native link target applied to the primary title link.
rel	string | undefined	undefined	Native relationship tokens applied to the primary title link. target="_blank" always adds noopener noreferrer.
description	string | undefined	undefined	Optional supporting copy rendered under the primary title.
links	FdTileLinkItem[]	[]	Optional supporting links rendered below the description. Set this as a JavaScript property; the component renders at most the first four valid entries and uses these entries before slotted supporting-link anchors.

• fd-tile is static in v1. It owns decorative framing and layout only; the application owns link destinations, text content, analytics, and any dynamic item lifecycle.
• The host shell is intentionally non-interactive. Keyboard focus lands only on the rendered native links.

Slots

Name	Description
supporting-link	Plain anchor source markup for supporting links. Used only when the links property has no valid entries; the component renders at most the first four valid anchors through its internal supporting-link list.

• Use slot="supporting-link" only for plain anchors with visible text and href values.
• Do not slot lists, buttons, cards, or nested navigation into Tile. Use fd-tile-list, Link Category, or page navigation for broader link collections.

CSS custom properties

Name	Default	Description
--fd-tile-gap	12px	Gap between the decorative visual and the text column before larger responsive breakpoints.
--fd-tile-link-color	var(--fdic-color-text-link, #1278b0)	Primary and supporting link color.
--fd-tile-description-color	var(--fdic-color-text-secondary, #595961)	Supporting description color.
--fd-tile-links-gap	4px	Gap between supporting links in the optional link stack.
--fd-tile-visual-top-gap	8px	Gap between the decorative visual and text column when visual-position="top".
--fd-tile-visual-track-size-expanded	48px	Visual track width when the tile's container reaches the expanded layout threshold.
--fd-tile-visual-size-expanded	48px	Internal fd-visual size when the tile's container reaches the expanded layout threshold.
--fd-tile-visual-content-size-expanded	22px	Icon content size inside the internal fd-visual at the expanded layout threshold.
--fd-tile-visual-track-size-large	60px	Visual track width when the tile's container reaches the large layout threshold.
--fd-tile-visual-size-large	60px	Internal fd-visual size when the tile's container reaches the large layout threshold.
--fd-tile-visual-padding-large	10px	Internal fd-visual padding when the tile's container reaches the large layout threshold.
--fd-tile-visual-content-size-large	28px	Icon content size inside the internal fd-visual at the large layout threshold.

• The component forwards the internal fd-visual sizing hooks by setting --fd-visual-size, --fd-visual-padding, and --fd-visual-content-size responsively.
• Tile uses the same foreground and background tone colors as fd-visual; use fd-visual hooks only when a product needs to intentionally diverge from the shared visual tone system.

Shadow parts

Name	Description
base	Root article wrapper.
visual	Decorative visual track that contains the internal fd-visual.
content	Text and supporting-links column.
title	Primary title wrapper.
description	Supporting description paragraph.
links	Optional supporting-links list.
link-item	Individual supporting-link list item.

Best practices

Do

• Use clear, destination-oriented title text such as “Benefits” or “Vision insurance.”
• Keep the description brief enough to scan in one or two lines when possible.
• Reserve supporting links for a few closely related tasks, not a secondary navigation tree.

Don't

• Don’t rely on the icon alone to explain what the tile means.
• Don’t hide the only destination behind supporting links while leaving the primary summary non-clickable without a good reason.
• Don’t turn the shell into a custom focus target or add click handlers around the whole tile.

Accessibility

• fd-tile is not hidden from assistive technology. It renders a semantic article wrapper labelled by the visible title when a title is present.
• The tile shell is not focusable. Keyboard users move directly to the native links in the plain tab order, with the primary link wrapping the visual and summary as one target when href is present.
• The decorative icon stays aria-hidden through the internal fd-visual.
• When the primary title has no href, it renders as plain text instead of a fake link.
• Supporting links render as a semantic list whether they are provided through the links property or authored as slotted supporting-link anchors.

Known limitations

• Slotted supporting links only accept plain anchors assigned to slot="supporting-link". Arbitrary slotted lists, cards, buttons, and nested navigation are intentionally unsupported.
• The component intentionally caps its rendered supporting links at four.
• Tile does not provide a blanket clickable-card, selectable, or dismissible variant in v1.

Related components

• Tile List — use fd-tile-list to arrange related tiles in a responsive set.
• Visual — Tile composes fd-visual internally for the decorative circular cue.
• Link — review broader link guidance when choosing destination labels and hierarchy.