Component documentation

Typography

The Smart design system provides 2 distinct typographic styles. The document style is meant for documents that are meant to be read (i.e. content websites such as this one).

The UI style is meant for user interfaces - usually for the display of a lot of information in a condensed space.

Add a .c-content (for the UI style) or .c-display (for the document style) class as a parent to your typographic HTML elements to “activate” rich typography. Rich typography means default styling of base elements like h1, h2, h3 but also paragraphs and lists.

App style

#
Content heading 1

Lorem ipsum dolor sit amet

Content heading 2

Lorem ipsum dolor sit amet

Content heading 3

Lorem ipsum dolor sit amet

Content heading 4

Lorem ipsum dolor sit amet

Body 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Body 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Document style

#
Display heading 1

Lorem ipsum dolor sit amet

Display heading 2

Lorem ipsum dolor sit amet

Display heading 3

Lorem ipsum dolor sit amet

Display Intro

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Display Body 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Display Body 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.