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';

---

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.

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

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

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

Alternating Sections

Tint every other Section with bgColor="scheme-main-bis" to build alternating page bands with zero custom CSS (step to "scheme-main-ter" when a later band needs to go one deeper). Scheme values emit no class — the Section renders a dark-mode-safe inline background-color: var(--bulma-scheme-*) style, so the bands stay correct when the color scheme flips.

<>
  <Section>
    <Title>First Band</Title>
    <SubTitle>Default scheme-main background.</SubTitle>
  </Section>
  <Section bgColor="scheme-main-bis">
    <Title>Second Band</Title>
    <SubTitle>Subtly offset, and it adapts to dark mode.</SubTitle>
  </Section>
  <Section>
    <Title>Third Band</Title>
    <SubTitle>Back on the base surface.</SubTitle>
  </Section>
  <Section bgColor="scheme-main-ter">
    <Title>Fourth Band</Title>
    <SubTitle>One step deeper, still zero custom CSS.</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.

---

Related Components

• 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

• Bulma Section Documentation
• Storybook: Section Stories

Pro Tip

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

---

Props

Prop	Type	Default	Description
color	Bulma color | 'inherit' | 'current'	—	Bulma color modifier for text.
bgColor	Bulma color | (typeof validSchemeColors)[number] | 'inherit' | 'current'	—	Bulma background color helper. scheme-* values render as a dark-mode-safe inline background-color: var(--bulma-scheme-*) instead of a class. The scheme-invert* values do not change text color — pair them with a contrasting foreground.
textColor	Bulma color | 'inherit' | 'current'	—	Bulma text color helper.
size	'medium' | 'large'	—	Section size for extra vertical spacing.
className	string	—	Additional CSS classes.
children	React.ReactNode	—	Section content.
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Section registers these variables on its own .section element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
--bulma-section-padding	$section-padding	3rem 1.5rem
--bulma-section-padding-desktop	$section-padding-desktop	3rem 3rem
--bulma-section-padding-medium	$section-padding-medium	9rem 4.5rem
--bulma-section-padding-large	$section-padding-large	18rem 6rem