Section

Basic header and content

To style a bifrost-standard box with a header, you can use <Section> and its sub-components <Section.Header> and <Section.Content>.

Link header

The <Section.Header arrow> prop supplies an arrow icon with a hover transition when wrapped in a link.

Remove native link styling with .bf-neutral-link and apply underline on hover with .bf-neutral-link-text.

Icon example

You can nest any content you like, including <Icon> and <Inline>

Make a button toolbar

Use small buttons

The <Section.Header> height is designed to accommodate small buttons. Using larger items might make the header stretch and no longer match other sections.

Do use small buttons (or other smaller items) in <Section.Header>

Don't use normal buttons (or other larger items) in <Section.Header>

Placement

<Inline> is useful to control inline layout:

Split sections

You can have multiple<Section.Content> elements, apply a borderTopto separate them visuablly:

Wrapped in link

Custom or no padding

If you need to control the <Section.Header> padding you can remove it with the noPadding prop.

For the content, you can simply avoid using <Section.Content>

Tabs example

You can use <Tabs> directly inside the section, to avoid the <Section.Content> padding.

By using <Tabs contentBackground="transparent">, the section background (and its border-radius) will be visible instead of the default tabs content background color.

Set padding to match section styling.

For advanced cases, have a look at the more flexible <Box> component.