Note

Updated on 20 June 2018

Docs are work in progress, check open issues and see how you can help!

Note component is used to display notes below cells and in other locations. It always inherits its container width and can contain Icon component. It doesn’t have any background color and inherits it from parent container as well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.

Styles

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.
Narrow

Narrow style is used in Menu next to Narrow Cell and Narrow Label.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.
Wide

Wide style is used mainly on bigger screens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.

Alignment

Center

Center aligns content in the middle of the Note.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.

Right aligns content on the right side of the Note.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.

Inverse

Inverse switches top padding with bottom padding, so that note could be attached to the top of the Cell. It is mainly used in conversation, to represent time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id mauris leo. Suspendisse sapien risus, sollicitudin ac mi a, placerat dictum augue. Ut ultrices luctus nisi et rutrum.

Specifications

$note-padding                           : unit(4);
$note-top-padding                       : unit(2);

$note-text-type                         : 'caption';

$note-narrow-padding                    : unit(4);
$note-narrow-horizontal-padding         : unit(2);
$note-narrow-top-padding                : unit(2);

$note-wide-padding                      : unit(6);
$note-wide-top-padding                  : unit(4);

API

name type default
style default / narrow / wide default
alignment left / center / right left
inverse false / true false