Skip to main content

Box

Overview​

The Box component renders a bordered, padded container with an optional shadow using Bulma's .box class. It's useful for visually separating content, callouts, or emphasizing important UI elements. Supports all Bulma helper props for color, spacing, and more.

info

By default, Box includes a subtle shadow. You can disable the shadow with hasShadow={false}.

Import​

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

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
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'—Text color helper.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Bulma color modifier for the box.
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'—Background color helper.
hasShadowbooleantrueWhether the box has a shadow.
childrenReact.ReactNode—Content to render inside the box.
...All standard <div> and Bulma helper props(See Helper Props)

Usage​

Default Box​

<Box>Default Box</Box>

Primary Text Color​

<Box textColor="primary">Box with Primary Text</Box>

Light Background​

<Box bgColor="grey-light">Box with Light Background</Box>

No Shadow​

<Box hasShadow={false}>Box without Shadow</Box>

Spacing and Alignment​

<Box m="4" p="4" textAlign="centered">
  Box with Margin, Padding, and Centered Text
</Box>

Custom Class​

<Box className="custom-box-class">Box with Custom Class</Box>

Viewport-Specific Text Color​

<Box textColor="primary" viewport="tablet">
  Box with Tablet-specific Primary Text
</Box>

Interactive Box​

<Box textColor="success" bgColor="black" m="3" p="3" textAlign="right">
  Interactive Box
</Box>

Accessibility​

  • Content: Use semantic HTML inside Box for best accessibility.
  • Shadow: The shadow is purely visual and does not affect accessibility.
  • Contrast: Ensure color combinations provide sufficient contrast.
tip

Box is perfect for card-like containers, callouts, or visually separating content.

  • Block: For simple vertical spacing between blocks of content.
  • Content: For typographically styled rich content.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​