Checkboxes
Preferences list
Best for
Settings and notification screens — a titled list where each row is a choice
Anatomy
Dark list header · rows with box, label, sub-label, badge, description · a link action · dashed dividers
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Feature cards
Best for
Plan add-ons and option pickers — each choice is a card, with read-only and disabled states
Anatomy
Grey list header · 2×2 Checkbox Cards: default, read-only, selected, disabled · 12px corners
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Logo cards
Best for
Integrations and connected apps — the same cards led by a brand logo
Anatomy
Grey list header · 2×2 Checkbox Cards with 40px logos · 24px corners
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Advanced analytics(Read only)Included in your plan.SSO & audit log(Disabled)Available on EnterpriseSelectable table
Best for
Bulk actions on records — select all, select some, act on the selection
Anatomy
Header with count and Export / Archive · select-all box that turns mixed · one box per row
Table name
3 selected elements
Permission groups
Best for
Roles and scopes — a parent box that follows its children and sets them
Anatomy
List header · groups with a mixed parent box · children indented 48px · brand boxes
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Logo card
Best for
One connected-app choice on its own — the Checkbox Card component
Anatomy
40px logo · label, sub-label, badge · description · trailing box · 24px corners
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Checkboxes
Preferences list
Best for
Settings and notification screens — a titled list where each row is a choice
Anatomy
Dark list header · rows with box, label, sub-label, badge, description · a link action · dashed dividers
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Feature cards
Best for
Plan add-ons and option pickers — each choice is a card, with read-only and disabled states
Anatomy
Grey list header · 2×2 Checkbox Cards: default, read-only, selected, disabled · 12px corners
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Logo cards
Best for
Integrations and connected apps — the same cards led by a brand logo
Anatomy
Grey list header · 2×2 Checkbox Cards with 40px logos · 24px corners
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Advanced analytics(Read only)Included in your plan.SSO & audit log(Disabled)Available on EnterpriseSelectable table
Best for
Bulk actions on records — select all, select some, act on the selection
Anatomy
Header with count and Export / Archive · select-all box that turns mixed · one box per row
Table name
3 selected elements
Permission groups
Best for
Roles and scopes — a parent box that follows its children and sets them
Anatomy
List header · groups with a mixed parent box · children indented 48px · brand boxes
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Logo card
Best for
One connected-app choice on its own — the Checkbox Card component
Anatomy
40px logo · label, sub-label, badge · description · trailing box · 24px corners
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.