Image
Plain image
Just a plain image
Rounded corners
An image with border radius for rounded corners
Missing plain image
Image not found but rendered as a placeholder.
Full width image
Image in full width mode.
Cover image
Image with cover mode, that covers the parent container.
Parameters (Blade)
| Key | Default value | Type | Available values | Description |
|---|---|---|---|---|
|
src
|
false | boolean | - | A string containing a valid URL or an ImageInterface object. If the object is used, the srcset attribute is ignored. |
|
srcset
|
false | boolean | - | A string containing a valid srcset attribute. Ignored if src is an ImageInterface object. |
|
alt
|
string | - | Alt text of the imag. May override the alt text of the ImageInterface object. | |
|
caption
|
string | - | Image caption. That will be visible for the user. | |
|
removeCaption
|
false | boolean | - | Removes the visible caption. The caption may still be used as an alt-text for the image. |
|
byline
|
string | - | Byline for additional information, placed under the caption | |
|
fullWidth
|
false | boolean | - | If the image should obtain the --full-width modifier. |
|
cover
|
false | boolean | - | If the image should obtain the --cover modifier. |
|
rounded
|
false | boolean | - | Border radius of the image, false for no radius. Accepted values are xs, sm, md, lg, full (circle) |
|
placeholderEnabled
|
true | boolean | - | If the placeholder should be enabled, if false, the component will not render at all if the src is empty |
|
placeholderText
|
false | boolean | - | Label to show if image is missing |
|
placeholderIcon
|
broken_image | string | - | Icon to display if image is missing / false to hide |
|
placeholderIconSize
|
xxl | string | - | Icons size, please refer to image component for size. |
|
imgAttributeList
|
[] | array | - | Attributes for the img element. |
|
lqipEnabled
|
true | boolean | - | If the low quality image placeholder should be enabled. |
|
calculateAspectRatio
|
true | boolean | - | If the aspect ratio should be calculated based on the image dimensions. This option will be ignored if cover is set to true. |
|
id
|
string | - | The DOM id of the component. | |
|
classList
|
[] | array | - | Array containing wrapping classes array |
|
attributeList
|
[] | array | - | Array containing keys and values rendered as attributes |
Parameters (CSS)
| Key | Default value | Type | Available values | Description |
|---|---|---|---|---|
|
--c-image--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-image--color--background-alt
|
var(--color--background-alt) | color | - | Manual companion token for subtle background surfaces. |
|
--c-image--color--background-contrast-muted
|
var(--color--background-contrast-muted) | color | - | Derived muted contrast for text and icons on background surfaces. |
|
--c-image--border-width
|
var(--border-width) | range | - | Border width |
|
--c-image--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-image--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-image--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner shape |
|
--c-image--font-size-90
|
var(--font-size-90) | range | - | One step below base in the type scale. |
|
--c-image--font-family-heading
|
var(--font-family-heading) | font | - | Falls back to body font if not set. |
|
--c-image--font-weight-bold
|
var(--font-weight-bold) | select | 600, 700, 800, 900 | Placeholder font weight |
|
--c-image--line-height-base
|
var(--line-height-base) | range | - | Caption line height |
|
--c-image--border-radius-multiplier
|
1 | range | - | Scales the border radius locally without changing the global border radius scale. |