Double Image

Double Image is used to represent combination of Image or Icon components when displaying — Transaction or Member.

By default, Primary image in Double Image component is X-Large size and rounded style and Secondary image is Default size (Look for size definitions in Image), circle style and has border. Also, any of these images can have Label property.

Also, Double Image accepts icons, however, icon should be always secondary image in this component and it doesn’t have any border.

Position of secondary Image or Icon depends on primary image size.

Pseudo-code:

<double-image>
  <image source="http://placekitten.com/g/200/240" size="x-large" style="rounded" label="5">
  <image source="http://placekitten.com/g/200/240" size="default" style="circle">
</double-image>
<double-image>
  <image source="http://placekitten.com/g/200/240" size="x-large" style="circle" >
  <image source="http://placekitten.com/g/200/240" size="default" style="rounded" label="5">
</double-image>
<double-image>
  <image source="http://placekitten.com/g/200/240" size="xxx-large" style="circle">
  <icon source="verification-check.svg" size="default">
</double-image>
x-large Sample image 5
default Sample image
x-large Sample image
default Sample image 5
xxx-large Sample image

Specifications

// Base

$double_image-secondary-image-distance            : unit(1);

// Sizes

$double_image-xxx-large-image-distance            : unit(0);