Bifrost Design System

Design React CSS

Figma

import Section from "@intility/bifrost-react/Section";

Section

Go to top

Props

Also see /react/box

Box component for more flexibility

Also see /css/section

Roll your own with CSS

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>.

TSX

<Section>
  <Section.Header>Section header</Section.Header>
  <Section.Content>Section content</Section.Content>
</Section>

Section header

Section content

Link header

Also see /css/link

Link styling

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.

TSX

<Section>
  <a href="#" className="bf-neutral-link">
    <Section.Header arrow>
      <span className="bf-neutral-link-text">Header-only link</span>
    </Section.Header>
  </a>
  <Section.Content>Section content</Section.Content>
</Section>

<a href="#" className="bf-neutral-link">
  <Section>
    <Section.Header arrow>
      <span className="bf-neutral-link-text">Neutral link text</span>
    </Section.Header>
    <Section.Content>Whole section is a link</Section.Content>
  </Section>
</a>

Header-only link

Section content

Neutral link text

Whole section is a link

Icon example

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

TSX

<Section>
  <Section.Header>
    <Inline align="center">
      <Icon icon={faMessagesQuestion} />
      <Inline.Stretch>Support</Inline.Stretch>
      <span>
        <Icon icon={faPhoneIncoming} className="bfc-base-2" /> 0
      </span>
      <span className="bfc-warning">
        <Icon icon={faCommentArrowDown} className="bfc-base-2" /> 2
      </span>
    </Inline>
  </Section.Header>
  <Section.Content>Content</Section.Content>
</Section>

Support

0 2

Content

Use small buttons

Also see /react/button

Button component

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>

TSX

<Section.Header>
  <Button small>Small button</Button>
</Section.Header>

Aligns perfectly

Text-only header

For comparison

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

TSX

<Section.Header>
  <Button>Normal button</Button>
</Section.Header>

Doesn't align

Text-only header

For comparison

Placement

<Inline> is useful to control inline layout:

TSX

<Section>
  <Section.Header>
    <Inline align="center">
      <Icon icon={faChartPie} />
      <Inline.Stretch>Statistics</Inline.Stretch>
      <Button small variant="flat">
        <Icon marginRight icon={faPencil} />
        Edit
      </Button>
      <Button small variant="flat">
        <Icon marginRight icon={faShare} />
        Share
      </Button>
    </Inline>
  </Section.Header>
  <Section.Content>Section content</Section.Content>
</Section>

Statistics

Section content

Split sections

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

TSX

<Section>
  <Section.Header>Split sections</Section.Header>
  <Section.Content>Section content 1</Section.Content>
  <Section.Content borderTop>Section content 2</Section.Content>
</Section>

Split sections

Section content 1

Section content 2

Wrapped in link

TSX

<Section>
  <Section.Header>Split sections</Section.Header>
  <Section.Content>Section content 1</Section.Content>
  <a href="/path" className="bf-neutral-link">
    <Section.Content borderTop>
      <Inline align="center">
        <Inline.Stretch className="bf-neutral-link-text">
          Link to another page
        </Inline.Stretch>
        <Box.Arrow />
      </Inline>
    </Section.Content>
  </a>
</Section>

Split sections

Section content 1

Link to another page

Custom or no padding

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

TSX

<Section>
  <Section.Header noPadding>
    noPadding Section header (still has a min-height)
  </Section.Header>
  <Section.Content>Section content</Section.Content>
</Section>

noPadding Section header (still has a min-height)

Section content

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

TSX

<Section>
  <Section.Header>Section header</Section.Header>
  Some content without padding
</Section>

Section header

Some content without padding

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.

TSX

<Section>
  <Section.Header>Section header</Section.Header>
  <Tabs contentBackground="transparent" paddingInline={16}>
    <Tabs.Item padding={16} content="Content for Profile">
      Profile
    </Tabs.Item>
    <Tabs.Item padding={16} content="Content for Email">
      Email
    </Tabs.Item>
  </Tabs>
</Section>

Section header

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

Sandbox

Open Sandbox

import Section from "@intility/bifrost-react/Section";
import Button from "@intility/bifrost-react/Button";
import Inline from "@intility/bifrost-react/Inline";
import AutoCol from "@intility/bifrost-react/AutoCol";
import { faPencil } from "@fortawesome/free-solid-svg-icons/faPencil";
import Icon from "@intility/bifrost-react/Icon";

export default function SectionDemo() {
  return (
    <AutoCol>
      <Section>
        <Section.Header>Basic section</Section.Header>
        <Section.Content>Section content</Section.Content>
      </Section>
      <Section>
        <a href="#path" className="bf-neutral-link">
          <Section.Header arrow>
            <span className="bf-neutral-link-text">Link header</span>
          </Section.Header>
        </a>
        <Section.Content>Section content</Section.Content>
      </Section>
      <Section>
        <Section.Header>
          <Inline align="center">
            <Inline.Stretch>With toolbar</Inline.Stretch>
            <Button small variant="flat">
              <Icon marginRight icon={faPencil} />
              Edit
            </Button>
          </Inline>
        </Section.Header>
        <Section.Content>Section content</Section.Content>
      </Section>
      <Section>
        <Section.Header>Split sections</Section.Header>
        <Section.Content>First section</Section.Content>
        <Section.Content borderTop>Second section</Section.Content>
      </Section>
    </AutoCol>
  );
}

Basic header and content

Link header

Icon example

Make a button toolbar

Use small buttons

Placement

Split sections

Wrapped in link

Custom or no padding

Tabs example

Sandbox