Image

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

Background

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.

1

Scaling

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

Default

Image is not sized to fit into the content box.

1 Sample image
Contain

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

2 Sample image
Cover

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

2 Sample image
Fill

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

2 Sample image

Style

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

Default
xxx-large Sample image
Rounded
xxx-large Sample image
Circle
xxx-large Sample image

Ratio

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

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

  • Small — 12px
  • Medium — 16px
  • Default — 24px
  • Large — 32px
  • X-Large — 48px
  • XX-Large — 72px
  • XXX-Large — 96px

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

default Sample image
small Sample image
x-large Sample image

Label

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

default Sample image 4
x-large Sample image 9

Border

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

x-large Sample image 5
default Sample image

Specifications

// 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: (
  small         : unit(3),                // 12
  medium        : unit(4),                // 16
  default       : unit(6),                // 24
  large         : unit(8),                // 32
  x-large       : unit(12),               // 48
  xx-large      : unit(18),               // 72
  xxx-large     : unit(24),               // 96
);

API

name type default
background (color) (none)
scaling auto / contain / cover / fill auto
style rounded / circle (none)
size small / medium / default / large / x-large / xx-large / xxx-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