Label

Label component is used mainly in complementary to Cell component as a grouping or explanation tool. Long text will be truncated.

Label

Suffix

Label can contain suffix - additional text or link. Suffix is always aligned to the right side of component. The label style and type defines suffix position.

Label
Link

Types

By default Label component used to group different Cell components.

Leading

This type used as first label for grouped Cell components and does not have any space above it.

Leading label
Stacked

This type used for a stand-alone Cell.

Stacked label

Styles

Label styles corresponds current Cell styles — narrow and wide.

Narrow
Label
Wide
Label

Specifications

// Base

$label-backgournd-color:                  palette(cg9);
$label-padding-top:                       unit(6);
$label-padding-bottom:                    unit(2);
$label-padding-horizontal:                unit(4);
$label-margin-top:                        unit(6);
$label-suffix-margin-left:                unit(4);

// Text

$label-text-type:                         'subtitle';

// Variations

$label-narrow-padding-top:                unit(6);
$label-narrow-padding-bottom:             unit(2);
$label-narrow-padding-horizontal:         unit(2);
$label-narrow-margin-top:                 unit(6);

$label-wide-padding-top:                  unit(6);
$label-wide-padding-bottom:               unit(2);
$label-wide-padding-horizontal:           unit(6);
$label-wide-margin-top:                   unit(8);

$label-stacked-padding-top:               unit(4);
$label-stacked-padding-bottom:            unit(0);
$label-stacked-padding-horizontal:        unit(4);

$label-stacked-narrow-padding-top:        unit(4);
$label-stacked-narrow-padding-bottom:     unit(0);
$label-stacked-narrow-padding-horizontal: unit(2);

$label-stacked-wide-padding-top:          unit(4);
$label-stacked-wide-padding-bottom:       unit(0);
$label-stacked-wide-padding-horizontal:   unit(6);

API

name type default
style default / narrow / wide default
type stacked / leading none
text string none
suffix string none