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

Usage​

Default Box​

The default usage of the Box component creates a bordered, padded container with a subtle shadow. Use this for grouping related content, highlighting sections, or providing visual separation in your layout.

<Box>Default Box</Box>

Primary Text Color​

Set the text color using the textColor prop. For example, textColor="primary" applies Bulma's primary color to the text inside the box, making it stand out for emphasis or branding.

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

Light Background​

Apply a background color using the bgColor prop. Here, bgColor="grey-light" gives the box a subtle light background, making its content stand out from the rest of the page.

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

No Shadow​

Disable the default shadow using the hasShadow={false} prop. This is helpful when you want a flatter appearance or need to match a minimal design.

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

Spacing and Alignment​

You can use Bulma helper props like m, p, and textAlign to control margin, padding, and text alignment. This example centers the text and adds margin and padding for a visually balanced box.

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

Custom Class​

Add your own CSS classes with the className prop to further customize the box's appearance or behavior, such as adding custom backgrounds or effects.

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

Viewport-Specific Text Color​

The viewport prop lets you apply color or other helpers at specific breakpoints. Here, textColor="primary" is only applied on tablet and larger screens, making the box adapt to different devices.

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

Interactive Box​

Combine multiple props such as textColor, bgColor, m, p, and textAlign to create visually distinct and interactive boxes for advanced layouts or callouts.

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

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
textColorBulma color | 'inherit' | 'current'—Text color helper.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Text color alias: renders has-text-<color>, exactly like textColor. Not a filled box variant (no .box.is-<color> CSS exists). Prefer textColor, which takes precedence when both are set; use bgColor for a colored surface.
bgColorBulma color | (typeof validSchemeColors)[number] | 'inherit' | 'current'—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.
hasShadowbooleantrueWhether the box has a shadow (default: true).
childrenReact.ReactNode—Content to render inside the box.
...All standard <div> attributes and Bulma helper props—See Helper Props

CSS & Sass Variables​

Box registers these variables on its own .box 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 VariableSass VariableDefault
--bulma-box-background-color$box-background-colorvar(--bulma-scheme-main)
--bulma-box-color$box-colorvar(--bulma-text)
--bulma-box-radius$box-radiusvar(--bulma-radius-large)
--bulma-box-shadow$box-shadowvar(--bulma-shadow)
--bulma-box-padding$box-padding1.25rem
--bulma-box-link-hover-shadow$box-link-hover-shadow0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px var(--bulma-link)
--bulma-box-link-active-shadow$box-link-active-shadowinset 0 1px 2px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2), 0 0 0 1px var(--bulma-link)