Figure. Images that load fast, read well and credit the source.
- Media
- Static
- Stability · Initial
- ::postkit-figure
Usage. An image, what it shows, and who made it.
<Figure
src="/component-preview.svg"
alt="Abstract Postkit editorial artwork"
caption="A portable story can retain its meaning across renderers."
credit="Postkit"
aspectRatio="16 / 9"
/>Give width and height and the page reserves the space before the image
loads. Several related images read better as a Gallery.
Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| srcRequired | string | None | The image URL. |
| altRequired | string | None | Alternative text, or an explicitly empty value for a decorative image. |
| caption | string | None | Visible supporting text below the image. |
| credit | string | None | The image attribution or credit. |
| creditHref | string | None | A URL for the image attribution. |
| href | string | None | An optional destination when the image is activated. |
| width | number | None | The intrinsic image width in pixels. |
| height | number | None | The intrinsic image height in pixels. |
| aspectRatio | string | None | A CSS aspect ratio such as 16 / 9. |
| objectFit | "contain" | "cover" | "cover" | How the image fits its media frame. |
| objectPosition | string | None | The focal position within the media frame. |
| loading | "eager" | "lazy" | "lazy" | Browser image loading behavior. |
| sizes | string | None | Responsive image display-size hints. |
| srcSet | string | None | Responsive image source candidates. |
| layout | "inline" | "wide" | "bleed" | "inline" | The figure width relative to article content. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
data-postkit-part, outlined where it sits. Point at a label to isolate its layer, or assemble it back into the component.Every part
- root <figure>
- mediaLink
- media <div>
- image <img>
- figcaption
- caption <span>
- credit <span>
- creditLink
- number
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned
Accessibility. Every image says what it shows, or that it's decoration.
altis required. Passalt=""for a decorative image, and the build accepts it on purpose.- The caption and credit sit in
figcaption, so they're tied to the image. - With
hrefset, the whole image is one link, named by its alt text.