@intility/bifrost-react/dist/components/Card/Card.Image.js

React library for Intility's design system, Bifrost.

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import classnames from "classnames";
/**
 * Image banner element for Card
 */ const CardImage = /*#__PURE__*/ forwardRef(({ url, className, style, height, aspectRatio, ...props }, ref)=>{
    // 2.* docs recommended setting a minHeight, support any height set through style prop for backwards compatibility
    const anyHeightValue = height ?? style?.height ?? style?.minHeight;
    return /*#__PURE__*/ _jsx("div", {
        ...props,
        className: classnames("bf-card-image", className),
        ref: ref,
        style: {
            backgroundImage: `url(${url})`,
            aspectRatio,
            ...anyHeightValue !== undefined && {
                // if we set both an aspect ratio and a height, the image will not stretch to full width
                // so we make sure aspect ratio is auto whenever a height value is passed in
                aspectRatio: "auto",
                height: anyHeightValue
            },
            ...style
        }
    });
});
CardImage.displayName = "Card.Image";
export default CardImage;