BRAID

Tools

Source
Playroom

Guides

Design Workflow
Development Workflow

Foundations

Layout
Tones
Iconography

Layout Components

Box
Card
Column
Columns
ContentBlock
Divider
Hidden
Inline
Stack
Tiles

Content Components

Alert
Badge
Bullet
BulletList
Heading
Loader
Secondary
Strong
Tag
Text

Interaction Components

Actions
Autosuggest
Button
ButtonRenderer
Checkbox
Dropdown
FieldLabel
FieldMessage
OverflowMenu
OverflowMenuItem
MonthPicker
Radio
Textarea
TextField
TextLink
TextLinkRenderer
Toggle

Logic Components

BraidProvider
BraidLoadableProvider
ThemeNameConsumer
useThemeName
useSpace
useColor
BackgroundProvider

All Components

Actions
Alert
Autosuggest
BackgroundProvider
Badge
Box
BraidLoadableProvider
BraidProvider
Bullet
BulletList
Button
ButtonRenderer
Card
Checkbox
Column
Columns
ContentBlock
Divider
Dropdown
FieldLabel
FieldMessage
Heading
Hidden
Inline
Loader
MonthPicker
OverflowMenu
OverflowMenuItem
Radio
Secondary
Stack
Strong
Tag
Text
TextField
TextLink
TextLinkRenderer
Textarea
ThemeNameConsumer
Tiles
Toggle

ContentBlock

Examples
Default Content Block
Theme: seekAnz
Content block
Theme: seekBusiness
Content block
Theme: jobsDbRebrand
Content block
Theme: jobsDb
Content block
Theme: jobStreet
Content block
Theme: jobStreetClassic
Content block
Theme: wireframe
Content block
Code:
<ContentBlock>
  <Placeholder height={100} label="Content block" />
</ContentBlock>
Open in Playroom
Large Content Block
Theme: seekAnz
Content block
Theme: seekBusiness
Content block
Theme: jobsDbRebrand
Content block
Theme: jobsDb
Content block
Theme: jobStreet
Content block
Theme: jobStreetClassic
Content block
Theme: wireframe
Content block
Code:
<ContentBlock width="large">
  <Placeholder height={100} label="Content block" />
</ContentBlock>
Open in Playroom

Required props

children
ReactNode

Optional props

width
"medium" | "large"

Further References

View Source