Images

<sl-images> | Slimages
Since 3.0 HUB24

Images that can be commonly used across brands and that can adapt to brand tokens.

These are a selection of images that can be used in components where an icon is not effective. These images are scalable vetors with a greater degree of detail than icons. They are visual aids to accompany text and help communicate an idea or concept. They are likely to be used in components like empty state and banners. 

<div>
  <sl-images>
    <img slot="image" src="../src/icons/hub24/empty-state-default.svg"/>
  </sl-images>
  <sl-images>
    <img slot="image" src="../src/icons/hub24/empty-state-error.svg"/>
  </sl-images>
  <sl-images>
    <img slot="image" src="../src/icons/hub24/empty-state-extract.svg"/>
  </sl-images>
  <sl-images>
    <img slot="image" src="../src/icons/hub24/empty-state-present.svg"/>
  </sl-images>
  <sl-images>
    <img slot="image" src="../src/icons/hub24/empty-state-pubish.svg"/>
  </sl-images>
</div>

Examples

Size

Images can scale to take the size of their container.

<div>

</div>

Brands

Images pick up the tokens of the brand.

<div>

</div>

Background colours

Images can be set upon a limited set of background colours.

<div>

</div>

Custom Shapes

Images can be set on shapes using custom property to make circles, squares, and rectangles.

<div class="images-shapes">
  <sl-images class="square">
    <img slot="image" src="../src/icons/hub24/empty-state-default.svg"/>
  </sl-images>
  <sl-images class="circle">
    <img slot="image" src="../src/icons/hub24/empty-state-default.svg"/>
  </sl-images>

</div>

<style>
  .images-shapes sl-images {
    display: inline-flex;
    width: 50px;
    height: 50px;
  }

  .images-shapes .square {
    --border-radius: var(--sl-border-radius-medium);
  }

  .images-shapes .circle {
    --border-radius: var(--sl-border-radius-circle);
  }
</style>

Slots

Name Description
image An image can be added

Learn more about using slots.

Custom Properties

Name Description Default
--border-radius The images’s border radius.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.