Skip to main content

ImageBanner

ImageBanner component used to display full width banner images, supports both local and remote images. It maintains the aspect ratio of the image based on a desired width and uses Shopify's @shopify/restyle system for styling consistency.

Vector icon

Usage​

import { ImageBanner } from "@/components";
import React, { ReactElement } from "react";

const Example = (): ReactElement => {
  return (
    <ImageBanner
      variant="remote"
      borderRadius="rounded-sm"
      source={
        "https://images.pexels.com/photos/461929/pexels-photo-461929.jpeg?auto=compress&cs=tinysrgb&w=400"
      }
    />
  );
};

export default Example;

Props​

Extends the ImageBannerProps from the ImageBanner Component

source​

Type: 'string' | 'getImage('banner')'

When passing an image name (as a string) to the getImage function, it must match a key in the images object.

variant​

Type: 'local' | 'remote'

width​

Type: 'number'

borderRadius​

Type: 'none' | 'rounded-xs' | 'rounded-sm' | 'rounded' | 'rounded-md' 'rounded-lg'| 'rounded-xl' | 'rounded-xxl' | 'rounded-hu' | 'rounded-full'

Rounds the corners of the card.