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​

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

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

Retina Image​

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

Aspect Ratio 16:9​

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

Aspect Ratio 4:3​

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

With Margin​

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

With Iframe​

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

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

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