Skip to main content

Title

Overview​

The Title component renders a Bulma-styled title (heading), supporting sizes 1–6, spacing, and rendering as any heading or paragraph element (h1–h6, p). Use it for section headings, page titles, or prominent labels.

info

Pair Title with SubTitle for semantic and visually balanced headings.

Import​

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

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
size'1' | '2' | '3' | '4' | '5' | '6'—Size of the title (Bulma sizes).
isSpacedboolean—Adds margin below the title.
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p''h1'HTML element to render as.
childrenReact.ReactNode—Title content.
...All standard heading/paragraph and Bulma helper props(See Helper Props)

Usage​

Default Title​

<Title>Default Title</Title>

Different Sizes​

<>
  <Title size="1">Title Size 1</Title>
  <Title size="3">Title Size 3</Title>
</>

Spaced Title​

<Title isSpaced>Spaced Title</Title>

With Margin​

<Title m="4">Title with Margin</Title>

As Paragraph​

<Title as="p" size="3">
  Title as Paragraph
</Title>

All Sizes​

<>
  {['1', '2', '3', '4', '5', '6'].map(size => (
    <Title key={size} size={size}>
      Title Size {size}
    </Title>
  ))}
</>

Title and Subtitle​

<Block>
  <Title as="p" size="1">
    Title 1
  </Title>
  <SubTitle as="p" size="3">
    Subtitle 3
  </SubTitle>
</Block>

Accessibility​

  • Semantic HTML: Use appropriate heading levels for document structure.
  • Spacing: Use isSpaced for extra margin when needed.
  • Screen readers: Headings are key landmarks, so set the correct as and size prop for hierarchy.
tip

When using as="p", the element is visually styled as a heading but semantically a paragraph.

  • SubTitle: For secondary headings.
  • Block: For spacing and grouping content.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​