Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

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 (c_content)

#
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.
Unordered lists
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Ordered lists
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
 
<div class="c-content">
    <div class="u-spacer-bottom-l u-spacer-top-l">
        <table class="c-table c-table c-styleguide-table-typography">
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Content heading 1</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h1 class="c-h1">Lorem ipsum dolor sit amet</h1>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Content heading 2</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h2 class="c-h2">Lorem ipsum dolor sit amet</h2>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Content heading 3</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h3 class="c-h3">Lorem ipsum dolor sit amet</h3>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Content heading 4</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h4 class="c-h4">Lorem ipsum dolor sit amet</h4>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Body 1</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Body 2</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <p class="c-body-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Unordered lists</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <ul>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Ordered lists</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <ol>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ol>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
.c-content
    - var shortContent = 'Lorem ipsum dolor sit amet';
    - var mediumContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    - var samples = [];
    - samples.push({name: 'Content heading 1', code: '<h1 class="c-h1">' + shortContent + '</h1>', extraClass: contentClass})
    - samples.push({name: 'Content heading 2',code: '<h2 class="c-h2">' + shortContent + '</h2>', extraClass: contentClass})
    - samples.push({name: 'Content heading 3', code: '<h3 class="c-h3">' + shortContent + '</h3>', extraClass: contentClass})
    - samples.push({name: 'Content heading 4', code: '<h4 class="c-h4">' + shortContent + '</h4>', extraClass: contentClass})
    - samples.push({name: 'Body 1', code: '<p>' + mediumContent + '</p>', extraClass: contentClass})
    - samples.push({name: 'Body 2', code: '<p class="c-body-2">' + mediumContent + '</p>', extraClass: contentClass})
    - samples.push({name: 'Unordered lists', code: '<ul><li>' + shortContent + '</li><li>' + shortContent + "</li><li>" + shortContent + "</li></ul>", extraClass: contentClass})
    - samples.push({name: 'Ordered lists', code: '<ol><li>' + shortContent + '</li><li>' + shortContent + "</li><li>" + shortContent + "</li></ol>", extraClass: contentClass})

    .u-spacer-bottom-l.u-spacer-top-l
        table.c-table.c-table.c-styleguide-table-typography
            each sample in samples
                tr
                    td.o-table-col-4
                        span.br-typography-sample-name= sample.name
                        br
                        span.br-typography-sample-size= sample.size
                    td.o-table-col-12
                        .br-typography-sample-content!= sample.code

Styleguide style (c_display)

#
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.
Unordered lists
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Ordered lists
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
 
<div class="c-display">
    <div class="u-spacer-bottom-l u-spacer-top-l">
        <table class="c-table c-table c-styleguide-table-typography">
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Display heading 1</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h1 class="c-display-h1">Lorem ipsum dolor sit amet</h1>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Display heading 2</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h2 class="c-display-h2">Lorem ipsum dolor sit amet</h2>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Display heading 3</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <h3 class="c-display-h3">Lorem ipsum dolor sit amet</h3>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Display Intro</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <p class="c-display-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Display Body 1</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <p class="c-display-body-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Display Body 2</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <p class="c-display-body-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Unordered lists</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <ul>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="o-table-col-4">
                    <span class="br-typography-sample-name">Ordered lists</span>
                    <br />
                    <span class="br-typography-sample-size"></span>
                </td>
                <td class="o-table-col-12">
                    <div class="br-typography-sample-content">
                        <ol>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ol>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
.c-display
    - var shortContent = 'Lorem ipsum dolor sit amet';
    - var mediumContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    - var samples = [];
    - samples.push({name: 'Display heading 1', code: '<h1 class="c-display-h1">' + shortContent + '</h1>', extraClass: contentClass})
    - samples.push({name: 'Display heading 2',code: '<h2 class="c-display-h2">' + shortContent + '</h2>', extraClass: contentClass})
    - samples.push({name: 'Display heading 3', code: '<h3 class="c-display-h3">' + shortContent + '</h3>', extraClass: contentClass})
    - samples.push({name: 'Display Intro', code: '<p class="c-display-intro">' + mediumContent + '</p>', extraClass: contentClass})
    - samples.push({name: 'Display Body 1', code: '<p class="c-display-body-1">' + mediumContent + '</p>', extraClass: contentClass})
    - samples.push({name: 'Display Body 2', code: '<p class="c-display-body-2">' + mediumContent + '</p>', extraClass: contentClass})
    - samples.push({name: 'Unordered lists', code: '<ul><li>' + shortContent + '</li><li>' + shortContent + "</li><li>" + shortContent + "</li></ul>", extraClass: contentClass})
    - samples.push({name: 'Ordered lists', code: '<ol><li>' + shortContent + '</li><li>' + shortContent + "</li><li>" + shortContent + "</li></ol>", extraClass: contentClass})

    .u-spacer-bottom-l.u-spacer-top-l
        table.c-table.c-table.c-styleguide-table-typography
            each sample in samples
                tr
                    td.o-table-col-4
                        span.br-typography-sample-name= sample.name
                        br
                        span.br-typography-sample-size= sample.size
                    td.o-table-col-12
                        .br-typography-sample-content!= sample.code