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​

This example shows a standard Section component, which provides vertical spacing and visual separation for your content. Use the Section component to break up your page into logical areas, such as headers, main content, or footers.

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

Medium Section​

Set the size prop to "medium" to increase the vertical spacing of the section. This is useful for visually emphasizing certain areas of your layout.

Live Editor
<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​

Set the size prop to "large" for even more vertical spacing. Use this for prominent page sections or to create clear separation between major content blocks.

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