Component contains static image loaded from remote source. Usually used for Vinted items, members pictures. See Icon component for local content container.


Image component can have defined background color to show while loading content. For Vinted item, you can use dominant_color property (default dominant_color is #d6eef3), however, by default Image doesn’t have any background.



Property defines how content inside Image component is fit and displayed. Inspired by CSS’ object-fit property.


Image is not sized to fit into the content box.

1 Sample image

Image is sized to maintain its aspect ratio while fitting within the content box.

2 Sample image

Image is sized to maintain its aspect ratio while filling entire content box.

2 Sample image

Image is filling entire content box without maintaining its aspect ratio.

2 Sample image


Image container has no style by default, however, you can apply rounded or circle style to decorate box.

x2-large Sample image
x2-large Sample image
x2-large Sample image


To keep image blocks consistent and don’t think in predefined sizes, you should use ratio option. It resizes container itself (and crops it’s content if needed). By default there’s no ratio applied - image container scales to fit it’s content whatever the ratio.

Each ratio option resizes image component, based on it’s width and stretches it’s height in these proportions:

  • Square1:1
  • Portrait2:3
  • Small Portrait - 3:4
  • Landscape3:2
  • Small Landscape - 4:3
2 Sample image
2 Sample image
2 Sample image
2 Sample image
2 Sample image

Width / Height

You can apply fixed width or height (or both) using numbers or percentages. If only one of these is defined, component checks ratio option.


Size parameter automatically sets width, height according to selected option and sets scaling to cover. Options are these:

  • X-Small — 12px
  • Small — 16px
  • Regular — 24px
  • Medium — 32px
  • Large — 48px
  • X-Large — 64px
  • X2-Large — 96px
  • X3-Large — 128px
  • X4-Large — 192px

You can override individual properties such as width, height and scaling by setting them manually.

regular Sample image
x-small Sample image
large Sample image


Label on Image component is mainly used to represent number of Vinted items grouped together.

regular Sample image 4
large Sample image 9


Border on Image component is mainly used on secondary image when combining two images into Double Image component.

large Sample image 5
regular Sample image


// Base
$image-default-radius                     : radius(none);
$image-rounded-radius                     : radius(default);
$image-circle-radius                      : radius(round);

// Text

$image-label-text-type                    : 'title';
$image-label-text-style                   : 'inverse';

$image-label-background-color             : rgba(palette(cg1), 0.24);

$image-sizes: (
  x-small      : unit(3),                // 12
  small        : unit(4),                // 16
  regular      : unit(6),                // 24
  medium       : unit(8),                // 32
  large        : unit(12),               // 48
  x-large      : unit(16),               // 64
  x2-large     : unit(24),               // 96
  x3-large     : unit(32),               // 128
  x4-large     : unit(48),               // 192


name type default
background (color) (none)
scaling auto / contain / cover / fill auto
style rounded / circle (none)
size x-small / small / regular / medium / large / x-large / x2-large / x3-large / x4-large (none)
width auto / (size unit) / (percentage) 100%
height auto / (size unit) / (percentage) auto
ratio auto / square / fullscreen / portrait / small-portrait / landscape / small-landscape auto
label string ’’
border true / false false