Image

Documentation is WIP, check open issues and start improving!

Image component contains non-vector image loaded localy or from remote source (See Icon component for vector image). This component can have similar sizes as Icon, however, it can also have it’s parent containers size. These are the following sizes:

  • X-Small — 12px
  • Small — 16px
  • Medium — 24px
  • Large — 32px
  • X-Large — 48px
  • Parent - Parent containers width and height

Parent containers in all cases should be in following proportions:

  • Square — 1:1
  • Wide — 2:1
  • Landscape — 4:3


This component also has margin_left and margin_right properties, which specifies the distance between the surrounding components. These margins are always pre-defined based on image size.

Non-Rounded

In some cases you’ll need non-rounded version of Image component.

Documentation

Specifications

// Base
$image-border-radius            : unit(0.75);      // 3px
$image-border-radius-small      : unit(0.5);       // 2px
$image-border-radius-large      : unit(1);         // 4px
$image-border-radius-none       : unit(0);         // 0px

$image-sizes: (
  x-small       : unit(3),                         // 12px
  small         : unit(4),                         // 16px
  medium        : unit(6),                         // 24px
  large         : unit(8),                         // 32px
  x-large       : unit(12)                         // 48px
);

$image-margins: (
  x-small       : unit(1),                         // 4px
  small         : unit(2),                         // 8px
  medium        : unit(2),                         // 8px
  large         : unit(3),                         // 12px
  x-large       : unit(3),                         // 12px
  parent        : 0                                // 0px
);

$image-margin-directions: 'left', 'right';

API

Name Values Default
size x-small / small / medium / large / x-large / parent parent
rounded true / false true
margin_left true / false false
margin_right true / false false