Content Label

A leading visual, a label with an optional sub-label and a line of description: the row you use for settings, integrations and list items. As a Content Card it becomes a bordered card with a close button.

FreeReact and Vue

Label(Sublabel)

Insert the content description here.

import { ContentLabel } from '@orvain/react';
 
<ContentLabel type="basic" label="Billing" description="Manage your plan and invoices" />
<ContentLabel type="avatar" size="lg" label="Ada Lovelace" description="Engineer" avatarProps={{ variant: 'text', name: 'Ada Lovelace' }} />

Add a basic Orvain Content Label, medium (40), labelled “Label” with the sub-label “(Sublabel)” and the description “Insert the content description here.”, no badge, no toggle.

Orvain MCPIncluded with the library

When to use#

For a settings row that names a thing and explains it, with a switch on the right.
For an integration, a payment method or a person in a list, led by a logo, card or avatar.
As a Content Card for a dismissible item, such as a connected account or a suggestion.

When not to use

Use a Data Table when rows need to be compared column by column.

Anatomy#

1Leading visual

None, an icon chip, an avatar, a brand or company logo, or (as a card) a payment card. 40px, or 48px at Large.

2Label and sub-label

Satoshi Medium 14 (16 at Large) with a Regular sub-label in #8f8f8f.

3Description

14px (16 at Large) in #6d6d6d, wrapping as needed.

4Trailing

An optional badge and switch on a row; a badge in the title line and a close button on a card.

States#

Medium (40)

The default size.

Large (48)

Larger visual and type, for roomier settings pages.

Content Card

360px wide, 16px inset, 12px radius, with a hairline and a soft shadow.

Source#

Preview – final code pending

The Content Label is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

settings lists