Skip to main content

Image

Overview​

The Image component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.

info

Use Image for consistent responsive image containers, or to embed arbitrary media (like iframes) with Bulma styling.

Import​

import { Image } 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 for the container.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Bulma color modifier for the image container.
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 for the container.
sizeBulma size string (e.g., '128x128', '16by9', 'square')—Fixed size or aspect ratio modifier for the image container.
isRoundedboolean—Renders the image with rounded corners.
isRetinaboolean—Uses retina (2x) image source.
srcstring—Image source URL.
altstring—Alternate text for the image.
childrenReact.ReactNode—Arbitrary content (e.g., iframe, custom HTML) inside the image container.
as'figure' | 'div' | 'p''figure'The tag to render as.
...All standard <figure>/<div> and Bulma helper props(See Helper Props)

Usage​

Default Image​

The simplest usage of the Image component, requiring only the src and alt props. The size prop controls the dimensions.

Live Editor
<Image
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png"
  alt="Sample image"
  size="128x128"
/>

Rounded Image​

The isRounded prop adds rounded corners to the image, useful for profile pictures or any image where a softer look is desired.

Live Editor
<Image src="..." alt="Rounded image" size="128x128" isRounded />

Retina Image​

The isRetina prop enables support for high-resolution (2x) images, ensuring crisp visuals on retina displays. Use this for logos or images that need to look sharp on all devices.

Live Editor
<Image src="..." alt="Retina image" size="128x128" isRetina />

Aspect Ratio 16:9​

Set the size prop to 16by9 to create a responsive image container with a 16:9 aspect ratio. This is ideal for video thumbnails or wide images.

Live Editor
<Image src="..." alt="16:9 aspect ratio image" size="16by9" />

Aspect Ratio 4:3​

Set the size prop to 4by3 for a classic photo or video aspect ratio. This helps maintain consistent layouts for media content.

Live Editor
<Image src="..." alt="4:3 aspect ratio image" size="4by3" />

With Margin​

You can use Bulma spacing helpers like m to add margin around the image for better layout control.

Live Editor
<Image src="..." alt="Image with margin" size="128x128" m="4" />

With Iframe​

The Image component can wrap arbitrary children, such as iframes, to provide responsive aspect ratios and Bulma styling for embedded media.

Live Editor
<Image size="16by9">
  <iframe
    className="has-ratio"
    width="640"
    height="360"
    src="https://www.youtube.com/embed/XxVg_s8xAms"
    frameBorder="0"
    allowFullScreen
    title="Sample YouTube Video"
  />
</Image>

With Custom Child​

You can also wrap custom content inside the Image component, such as a styled div or any React node, to maintain aspect ratio and Bulma styling.

Live Editor
<Image size="4by3">
  <div
    className="has-ratio has-background-grey-light has-text-centered"
    style={{
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <p>Custom Content</p>
  </div>
</Image>

With Text Color and Background​

Combine the textColor and bgColor props to style the image container for branding or emphasis.

Live Editor
<Image
  src="..."
  alt="Image with text and background color"
  size="128x128"
  textColor="primary"
  bgColor="light"
/>

Accessibility​

  • Alt Text: Always provide a descriptive alt attribute for images.
  • Aspect Ratios: Maintains the correct aspect ratio for images, iframes, or any child.
  • Custom Content: When embedding iframes or custom children, ensure accessibility via proper ARIA labeling or content.
warning

Do not use Image for decorative images without alt="", unless purely presentational.

  • Box: For bordered, padded containers.
  • Content: For typographically styled rich content.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​