Docs

日本語 Dark mode

Labs

DocCard

Content card for documentation index pages and content lists. Supports three variants, optional icon, badge, tags, and inline title mode.

Props

Prop	Type	Default	Description
title	string	—	Card heading (required)
description	string	—	Card body text (required)
href	string	—	Link destination (required)
variant	'default' \| 'feature' \| 'guide'	'default'	Visual variant
icon	string	—	SDS icon class
titleInline	boolean	false	Show icon + title in a row
badge	string	—	Badge label above title
tags	string[]	[]	Tag pills below description

Variants

Default variant

Standard content card with clean borders.

Feature variant

Highlighted card for featured content.

Guide variant

Step-by-step guide card styling.

Inline title

When titleInline is true and an icon is set, the icon and title render in a single row.

Inline with icon

Icon and title on the same line.

No icon (inline ignored)

titleInline has no effect without an icon.

With badge

Badged card

Shows a badge label above the title.

Badge + inline title

Badge appears below the inline title row.

With tags

Tagged card

Tag pills appear below the description.

APIRESTAuthentication

Single tag

Works with a single tag too.

Combined

All optional props together.

Kitchen sink

Every optional prop enabled at once.

IoTConnectivityAPI