Skip to main content

Section

Overview​

The Section component provides vertical spacing and visual separation for your Bulma React UI. Use it to divide your page into large blocks of content, ensure consistent spacing, and apply Bulma helper props for color, background, and more. Section supports all Bulma section sizes and can be combined with containers, titles, and other layout components.

info

Use Section to break up your page into logical, visually distinct areas—such as headers, main content, and footers.

Import​

import { Section } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
size'medium' | 'large'—Section size for extra vertical spacing.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Bulma color modifier for text.
bgColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Bulma background color helper.
textColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Bulma text color helper.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Section content.
...All standard HTML and Bulma helper props(See Helper Props)

Usage​

Default Section​

<Section>
  <Title>Section</Title>
  <SubTitle>
    Divide your content into into <strong>sections</strong>. Tada!
  </SubTitle>
</Section>

Medium Section​

<Section size="medium">
  <Title>Medium Section</Title>
  <SubTitle>
    Divide your content into into <strong>sections</strong>. Tada! Make sure
    your window is wide or you won't see a medium section.
  </SubTitle>
</Section>

Large Section​

<Section size="large">
  <Title>Large Section</Title>
  <SubTitle>
    Divide your content into into <strong>sections</strong>. Tada! Make sure
    your window is wide or you won't see a large section.
  </SubTitle>
</Section>

Accessibility​

  • The section renders as a semantic <section> for improved structure and accessibility.
  • Use headings (<Title>, <SubTitle>) and semantic content for screen reader support.
note

Sections help organize your document outline for screen readers and SEO.

  • Container: Nest inside a section to constrain content width.
  • Title, SubTitle: For headings and description in sections.
  • Helper Props: Use Bulma helper props for utility-based styling.

Additional Resources​

Pro Tip

You can use all Bulma helper props with <Section /> for powerful utility-based styling.