Cutout
@stellaria/nebula-webCutoutPropsPreview
Props
7| Prop | Type | Default |
|---|---|---|
background What fills the box, as a node: a `next/image` with `fill`, the catalogue `Image`, a plain `<img>`. The box gives it the frame — `position: relative; overflow: hidden` and the corners of `r` — and a plain `<img>` inside it is made to cover. It is a slot so the component depends on no framework and no CDN. | ReactNode | — |
children Anything else over the figure: a caption, a badge. | ReactNode | — |
className | string | — |
figure The cut-out figure, laid over the background as an absolutely positioned `<img>`. | string | — |
figureAlt Its alt. Empty by default: the figure is decoration over a background that already says it. | string | "" |
figurePosition Where the figure sits. Bottom-right by default: `{ bottom: 0, right: 0 }`. | CutoutFigurePosition | — |
figureSize The figure's width as a fraction of the box. | number | 1 |
Slot props
2Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
backgroundProps The wrapper of the background slot. | BoxSlotProps | — |
figureProps The figure `<img>`. | Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, "src" | "alt"> | — |
Also accepts
On top of its own props, this component forwards these groups.