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>

---

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 | 'inherit' | 'current'	—	Bulma background color helper.
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