BalanceReckon Design System

BalanceReckon Design System

Open Playroom Welcome Concepts Contributing

Packages

Getting started Development workflow Next Link

ButtonDeprecated

Heading — Guidelines

Sidebar Navigation

Keyboard Shortcuts

Radio Button Group

Segmented ControlDeprecated

DrawerDeprecated

DropdownDeprecated

Data TableDeprecated

Virtualized Data TableDeprecated

Content

Introduction Capitalisation Date & time Glossary Grammar and mechanics Punctuation Product voice and tone

Patterns

Introduction Accessibility App header Combobox with tags Component composition Forms Assigning test IDs to components

Theming

Introduction Theming playground

FoundationsHeading

Heading

How to keep visual heading level and semantic HTML level independent when they diverge.

Overview Guidelines

Semantic headings

There may be occasions where the desired appearance does not meet the necessary semantic heading level. Use the as property to change the HTML element that will be rendered.

Heading

Renders semantic heading levels 1-6, with visual appearance controlled independently.

Link

A styled anchor, used how you would a traditional anchor element.

On this page

Semantic headings