Text sizes

large-heading-text: Regular, 36px / 48px / -0.5px on mobile; 42px / 48px / -0.6px on desktop

normal-heading-text: Bold, 26px / 36px / -0.3px

small-heading-text: Bold, 18px / 24px / normal

large-text: Regular, 24px / 30px / normal

normal-text: Regular, 17px / 24px / normal

small-text: Bold, 16px / 24px / normal

smaller-text: Regular, 16px / 24px / normal

smallest-text: Regular, 14px / 18px / normal

Columns

Column mixins are used for defining widths of container and content boxes. The alignment of the boxes (centered on page, floated to a side etc) is not defined in these mixins and must be specified in each specific case. (See code examples below.)

Note: all .content elements in this demo section use @include column-padding; mixin to create the left and right gutters of the content boxes. It has to be manually used in other pages when needed.

Full page layout

.full
{
    @include full-page;
}

Note: this mixin should not be used to create a generic page wrapper for content that gets further layed out in multiple columns.

All column mixin logic is built around the concept of content not being inside a wrapper. Each section should be a separate block and they should not all be grouped in a full-page container.

Therefore this mixin is usually not the right one to use. See examples below for how to correctly create column layouts.

Basic half and quarter page width columns

Left half page on desktops, full page limited content on tablets, full page on mobile

.first.half
{
    @include first-half-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum arcu id nibh dictum maximus. Nam commodo tellus ac nisl iaculis auctor. Donec aliquet enim eros, quis rhoncus magna feugiat vel. Donec tincidunt rhoncus massa, et dapibus leo. Nullam finibus blandit erat. Donec euismod; lectus sed euismod euismod, quam diam sagittis turpis, id malesuada augue orci at tortor. Morbi efficitur, dui non congue rutrum, velit felis venenatis arcu, ac accumsan diam nibh et tortor. Cras aliquam augue eget porta mattis?

Right half page on desktops, full page limited content on tablets, full page on mobile

.second.half
{
    @include last-half-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Curabitur convallis eros risus, vitae venenatis lectus porta at? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam eget lorem aliquet, aliquam eros ut, lobortis mauris! Integer vel elit vitae justo varius posuere eget bibendum eros.

Left quarter page on desktops, half page on tablets, full page on mobile

.first.quarter
{
    @include half-page-on-tablets;
    @include first-quarter-page-on-desktops;

    @include for-desktops
    {
        clear: left;
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut malesuada sem; pulvinar aliquet magna? Phasellus non pharetra nunc. Nulla facilisi. Aliquam ornare orci et mauris congue mollis. Maecenas lacus nisl, consequat eget dolor in, congue sollicitudin elit. Suspendisse potenti.

Middle quarter page on desktops, half page on tablets, full page on mobile

.second.quarter
{
    @include half-page-on-tablets;
    @include quarter-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Curabitur sed diam tincidunt, iaculis dui et, semper mauris! Fusce facilisis tempor posuere. Donec posuere molestie metus, ut elementum dolor tempor vitae. Ut vel mauris lectus. Maecenas tincidunt dui sit amet facilisis accumsan? Fusce finibus elit in consequat vestibulum. Morbi ornare ornare imperdiet. Suspendisse a leo eu sapien consequat rhoncus.

Middle quarter page on desktops, half page on tablets, full page on mobile

.third.quarter
{
    @include half-page-on-tablets;
    @include quarter-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fringilla eu enim sed maximus. Vestibulum vel volutpat ex, sed imperdiet augue. Nullam a nisl porttitor, molestie nibh et, aliquam massa. Maecenas faucibus ipsum eu turpis dapibus, ut placerat risus rutrum. Pellentesque tempor tincidunt dictum. Maecenas ac tempor lacus! Suspendisse non enim neque. Donec consequat, purus pulvinar viverra rutrum; ipsum elit dapibus ipsum; at feugiat elit purus et lorem.

Right quarter page on desktops, half page on tablets, full page on mobile

.fourth.quarter
{
    @include half-page-on-tablets;
    @include last-quarter-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Maecenas hendrerit interdum ex, at lacinia justo rutrum vitae! Quisque ipsum libero, finibus sed pulvinar eget, volutpat in quam. Nullam facilisis, dui ut pharetra eleifend, tellus turpis porttitor neque, in semper neque nisi non elit. Cras sollicitudin massa id ipsum tempus vestibulum. Nam quis laoreet lacus.

Left quarter page on desktops, half page on tablets, full page on mobile

.first.quarter
{
    @include half-page-on-tablets;
    @include first-quarter-page-on-desktops;

    @include for-desktops
    {
        clear: left;
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut malesuada sem; pulvinar aliquet magna? Phasellus non pharetra nunc. Nulla facilisi. Aliquam ornare orci et mauris congue mollis. Maecenas lacus nisl, consequat eget dolor in, congue sollicitudin elit. Suspendisse potenti.

Center half page on desktops, full page limited content on tablets and mobile

.middle.half
{
    @include half-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Nunc rhoncus mi at dolor pharetra, non mollis purus rhoncus. Maecenas faucibus sagittis urna, id luctus mauris venenatis nec. Donec venenatis tincidunt facilisis. Fusce volutpat maximus imperdiet. Proin fermentum a ante ac malesuada. Suspendisse efficitur efficitur leo, at tempor eros tempor non! Nunc porttitor dolor tortor, sed facilisis erat lacinia eu. Morbi gravida pharetra commodo. Nullam eget tristique nulla, vel dictum tortor! Sed ornare sagittis massa et hendrerit? Vestibulum maximus mauris urna; at ultrices nunc tincidunt congue. Proin iaculis sagittis augue, ac aliquam orci dapibus varius. Quisque tempus lectus eget neque tristique vehicula.

Right quarter page on desktops, half page on tablets, full page on mobile

.fourth.quarter
{
    @include half-page-on-tablets;
    @include last-quarter-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Maecenas hendrerit interdum ex, at lacinia justo rutrum vitae! Quisque ipsum libero, finibus sed pulvinar eget, volutpat in quam. Nullam facilisis, dui ut pharetra eleifend, tellus turpis porttitor neque, in semper neque nisi non elit. Cras sollicitudin massa id ipsum tempus vestibulum. Nam quis laoreet lacus.

Three quarter page columns

Left three quarters of page on desktops, full page content on tablets and mobile

.first.three.quarters
{
    @include first-three-quarters-of-page-on-desktops;

    @include for-at-least-tablets
    {
        clear: left;
    }

    @include for-desktops
    {
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut malesuada sem; pulvinar aliquet magna? Phasellus non pharetra nunc. Nulla facilisi. Aliquam ornare orci et mauris congue mollis. Maecenas lacus nisl, consequat eget dolor in, congue sollicitudin elit. Suspendisse potenti. Curabitur sed diam tincidunt, iaculis dui et, semper mauris! Fusce facilisis tempor posuere. Donec posuere molestie metus, ut elementum dolor tempor vitae. Ut vel mauris lectus. Maecenas tincidunt dui sit amet facilisis accumsan? Fusce finibus elit in consequat vestibulum. Morbi ornare ornare imperdiet.

Right quarter page on desktops, half page on tablets, full page on mobile

.fourth.quarter
{
    @include half-page-on-tablets;
    @include last-quarter-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Maecenas hendrerit interdum ex, at lacinia justo rutrum vitae! Quisque ipsum libero, finibus sed pulvinar eget, volutpat in quam. Nullam facilisis, dui ut pharetra eleifend, tellus turpis porttitor neque, in semper neque nisi non elit. Cras sollicitudin massa id ipsum tempus vestibulum. Nam quis laoreet lacus.

Left quarter page on desktops, half page on tablets, full page on mobile

.first.quarter
{
    @include half-page-on-tablets;
    @include first-quarter-page-on-desktops;

    @include for-desktops
    {
        clear: left;
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut malesuada sem; pulvinar aliquet magna? Phasellus non pharetra nunc. Nulla facilisi. Aliquam ornare orci et mauris congue mollis. Maecenas lacus nisl, consequat eget dolor in, congue sollicitudin elit. Suspendisse potenti.

Right three quarters of page on desktops, full page content on tablets and mobile

.last.three.quarters
{
    @include last-three-quarters-of-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Sed et nisi id massa feugiat bibendum dapibus semper sem. Proin venenatis, eros sed efficitur vulputate, mi libero cursus nunc, vitae pellentesque magna turpis a massa. In ut est fringilla risus porta ultrices sit amet a enim! Aliquam lobortis a purus ut semper. Donec quis viverra mauris; vitae finibus felis. Nunc vel imperdiet mi? Aenean volutpat odio eget consequat pretium. Pellentesque sit amet orci arcu. Sed eu facilisis ex. Aliquam id varius quam, sed gravida ligula? In mattis iaculis ex, eu faucibus dolor mollis in. Morbi sed felis a arcu cursus varius. Mauris vel lorem accumsan, tincidunt felis vel, fermentum ex? Aenean non elit eget nisi interdum gravida sed vitae urna? Interdum et malesuada fames ac ante ipsum primis in faucibus.

Quarter page columns nested in half page containers without explicit widths

Left quarter page contained in a half page container on desktops, half page on tablets, full page on mobile

.nested .first.container-half .first.nested-quarter
{
    @include half-page-on-tablets;
    @include first-quarter-page-on-desktops;
    @include for-at-least-tablets
    {
        clear: left;
        float: left;
    }
}

Morbi gravida pharetra commodo. Nullam eget tristique nulla, vel dictum tortor! Sed ornare sagittis massa et hendrerit? Vestibulum maximus mauris urna; at ultrices nunc tincidunt congue.

Quarter page contained in a half page container on desktops, half page on tablets, full page on mobile

.nested .first.container-half .second.nested-quarter
{
    @include half-page-on-tablets;
    @include quarter-page-on-desktops;
    @include for-at-least-tablets
    {
        float: left;
    }
}

Quisque tempus lectus eget neque tristique vehicula. Nulla vehicula ipsum in diam mattis, vitae mollis elit vestibulum! Praesent sagittis orci sit amet semper convallis. Morbi mauris massa, fringilla sed iaculis ac; ultrices quis odio. Ut nec tellus sit amet erat euismod maximus?

Quarter page contained in a half page container on desktops, half page on tablets, full page on mobile

.nested .second.container-half .first.nested-quarter
{
    @include half-page-on-tablets;
    @include quarter-page-on-desktops;
    @include for-at-least-tablets
    {
        float: left;
    }
}

Nulla vehicula ipsum in diam mattis, vitae mollis elit vestibulum! Praesent sagittis orci sit amet semper convallis. Morbi mauris massa, fringilla sed iaculis ac; ultrices quis odio. Ut nec tellus sit amet erat euismod maximus? Praesent tempor turpis tellus, sit amet dignissim dui consectetur at.

Right quarter page contained in a half page container on desktops, half page on tablets, full page on mobile

.nested .second.container-half .second.nested-quarter
{
    @include half-page-on-tablets;
    @include last-quarter-page-on-desktops;
    @include for-at-least-tablets
    {
        float: left;
    }
}

Praesent tempor turpis tellus, sit amet dignissim dui consectetur at. Morbi vel eros id purus tincidunt vulputate. Morbi vel eros id purus tincidunt vulputate.

Half page column overlapping a three quarter page column

Left three quarters of page with last quarter underlap on desktops, full page limited content on tablets, full page on mobile

.overlap .first.three.quarters
{
    @include first-three-quarters-of-page-on-desktops;
    @include underlap-last-quarter-on-desktops;

    @include for-at-least-tablets
    {
        clear: left;
    }

    @include for-desktops
    {
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut malesuada sem; pulvinar aliquet magna? Phasellus non pharetra nunc. Nulla facilisi. Aliquam ornare orci et mauris congue mollis. Maecenas lacus nisl, consequat eget dolor in, congue sollicitudin elit. Suspendisse potenti. Curabitur sed diam tincidunt, iaculis dui et, semper mauris! Fusce facilisis tempor posuere. Donec posuere molestie metus, ut elementum dolor tempor vitae. Ut vel mauris lectus. Maecenas tincidunt dui sit amet facilisis accumsan?

Right half page shifted down with first quarter overlap on desktops, full page limited content on tablets, full page on mobile

.overlap .second.half
{
    @include last-half-page-on-desktops;
    @include overlap-first-quarter-on-desktops;
    @include shift-down-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Nulla vehicula ipsum in diam mattis, vitae mollis elit vestibulum! Praesent sagittis orci sit amet semper convallis. Morbi mauris massa, fringilla sed iaculis ac; ultrices quis odio. Ut nec tellus sit amet erat euismod maximus? Praesent tempor turpis tellus, sit amet dignissim dui consectetur at. Morbi vel eros id purus tincidunt vulputate.

Equal height columns with one half shifted down

Left equal height quarter page contained in a half page container on desktops, left equal height half page on tablets, full page on mobile

.equal-height
{
    clear: left;

    @include equal-height-half-pages-on-desktops;

    .first.equal-height-container-half
    {
        @include equal-height-half-pages-on-tablets;
    }

    .first.equal-height-container-half .first.nested-quarter
    {
        @include first-equal-height-nested-quarter-page-on-desktops;
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a placerat orci. Curabitur a dui imperdiet mi varius pulvinar! Ut eget rutrum nibh. Donec hendrerit cursus odio in porttitor. Praesent pulvinar molestie nisl, non venenatis est ullamcorper in.

Equal height quarter page contained in a half page container on desktops, right equal height half page on tablets, full page on mobile

.equal-height
{
    clear: left;

    @include equal-height-half-pages-on-desktops;

    .first.equal-height-container-half
    {
        @include equal-height-half-pages-on-tablets;
    }

    .first.equal-height-container-half .second.nested-quarter
    {
        @include equal-height-nested-quarter-page-on-desktops;
        float: left;
    }
}

Tortor sodales consequat? Pellentesque ut purus at magna congue lobortis. Suspendisse ultricies lacus libero. Sed egestas ante congue laoreet. Proin auctor mi in magna pharetra, interdum faucibus orci fermentum. Sed sit amet nunc augue. Pellentesque semper vitae ligula in tempus. Donec lobortis, metus eget suscipit tincidunt.

Right equal height half page shifted down on desktops, full page limited content on tablets, full page on mobile

.equal-height
{
    clear: left;

    @include equal-height-half-pages-on-desktops;

    .second.equal-height-half
    {
        @include shift-down-on-desktops;
    }
}

Arcu nulla dignissim erat, in commodo nibh mi at est. Aliquam erat volutpat. In in fermentum massa. Vestibulum ac ultricies nisl? Aenean non mollis odio, et porttitor nisl. Mauris vel nisi consequat, feugiat diam ut. Frmentum sapien. Nam sed tortor at turpis vehicula tempus sit amet at tortor.

Left equal height half page shifted down on desktops, full page limited content on tablets, full page on mobile

.second.equal-height
{
    clear: left;

    @include equal-height-half-pages-on-desktops;
    @include below-shifted-down-on-desktops;

    .first.equal-height-half
    {
        @include shift-down-on-desktops;
    }
}

Duis porttitor; dui non cursus luctus, turpis augue blandit dolor, eu tristique felis augue vitae sem. Cras arcu massa, maximus vel felis id, scelerisque finibus felis. Mauris eu lobortis dui. Sed gravida est a orci dictum, non gravida ipsum blandit. Suspendisse ultrices ligula quis tortor rhoncus.

Equal height quarter page contained in a half page container on desktops, equal height half page on tablets, full page on mobile

.second.equal-height
{
    clear: left;

    @include equal-height-half-pages-on-desktops;
    @include below-shifted-down-on-desktops;

    .second.equal-height-container-half
    {
        @include equal-height-half-pages-on-tablets;
    }

    .second.equal-height-container-half .third.nested-quarter
    {
        @include equal-height-nested-quarter-page-on-desktops;
        float: left;
    }
}

Et tincidunt risus maximus. Curabitur malesuada enim ullamcorper sollicitudin varius. Pellentesque efficitur tempor viverra. Pellentesque consectetur turpis at porta dictum? Suspendisse potenti. Nam dignissim augue vitae sem convallis faucibus? Mauris ac erat nec lorem dictum accumsan et non tellus.

Right equal height quarter page contained in a half page container on desktops, equal height half page on tablets, full page on mobile

.second.equal-height
{
    clear: left;

    @include equal-height-half-pages-on-desktops;
    @include below-shifted-down-on-desktops;

    .second.equal-height-container-half
    {
        @include equal-height-half-pages-on-tablets;
    }

    .second.equal-height-container-half .fourth.nested-quarter
    {
        @include last-equal-height-nested-quarter-page-on-desktops;
        float: left;
    }
}

Etiam porttitor id sem nec accumsan. Pellentesque sit amet ex id nisi molestie sagittis quis id nisl. Proin accumsan facilisis ultrices. In hac habitasse platea dictumst. Proin sed metus id nisl gravida accumsan vel malesuada eros.

Two-thirds and one-third page width columns

Left two thirds of a page on desktops, full page limited content on tablets, full page on mobile

.first.two-thirds
{
    @include first-two-thirds-of-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dolor at arcu egestas interdum! Morbi vitae mattis lacus. Mauris vehicula felis nunc, sed tristique erat sodales in? Integer ullamcorper libero ut nunc luctus, eu mollis ex suscipit. Quisque blandit diam sed nibh ullamcorper, in aliquet libero cursus. Donec mattis elit est, nec vestibulum tortor vulputate eget. Donec ac leo lectus? Nulla commodo diam ut tincidunt interdum? Morbi vitae molestie enim.

Right last two thirds of a page on desktops, full page limited content on tablets, full page on mobile

.last.two-thirds
{
    @include last-two-thirds-of-page-on-desktops;

    @include for-desktops
    {
        float: left;
    }
}

Nullam quis hendrerit ipsum, sed tincidunt purus? Ut at dolor semper, porta nibh vitae, tempor augue. Phasellus quis sapien scelerisque, euismod magna nec, viverra eros! Aliquam consectetur ex eget orci mattis, ut euismod tellus blandit. Integer tincidunt efficitur eros eget volutpat? Suspendisse potenti. Fusce pulvinar nisl urna, id congue felis gravida ut? Nunc pellentesque, justo in consequat sodales, justo magna lobortis nisl, et sollicitudin ligula. Vivamus auctor pretium ante vel viverra. Vivamus egestas odio vitae placerat faucibus.

Richtext

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend lacus quis dolor faucibus lacinia. Nunc ut dolor magna. Curabitur euismod, tortor ornare placerat pellentesque, magna dolor dictum turpis, sed finibus nisl lorem et ligula. Morbi mattis nunc in massa tempor tristique. Donec bibendum magna vel ante fermentum, ut pulvinar sapien consectetur.

Aenean pretium, urna a tempus luctus, est turpis placerat ligula; sit amet accumsan nulla dolor sed justo. Donec dictum condimentum velit, a porttitor nulla hendrerit nec. Integer mattis ultrices molestie.

Level 2 heading ac ligula consequat, vulputate neque a, facilisis eros.

Mauris posuere finibus orci, vitae sagittis metus. Mauris rutrum ante sed odio congue auctor eget in enim. Suspendisse potenti. Suspendisse potenti. Suspendisse tempus condimentum lacus, nec bibendum nunc molestie id?

Etiam pharetra ligula vel tellus convallis iaculis.

Maecenas cursus gravida diam, quis porttitor neque efficitur in. Praesent fringilla erat erat, id sagittis nisl venenatis ut. Etiam pharetra bibendum libero eu semper. Proin pretium vitae dolor at pharetra. Donec consequat et ligula sit amet bibendum? Quisque dui risus, pulvinar non lorem sit amet, lacinia vehicula nulla. Praesent mattis lacus id lectus semper bibendum.

Level 3 heading amet eleifend neque. Vivamus vel massa enim.

Fusce ut nunc lectus? Suspendisse feugiat sem ultrices, finibus felis ac, luctus ante. Fusce ut urna volutpat nisi tempus rhoncus elementum nec sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed est nunc, varius et vehicula non, cursus id metus. In hac habitasse platea dictumst.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus facilisis at sem sit amet pulvinar. Sed vestibulum tempus dui nec iaculis. Nullam justo odio, pellentesque vel euismod et; blandit aliquet diam.
  • Suspendisse vehicula nibh vitae lorem tempor sodales. Vestibulum nec viverra lacus.
  • Aliquam tincidunt condimentum tortor nec tristique! In ac sem et nisl aliquet suscipit nec ac leo. Vestibulum eu tincidunt est, vitae fringilla lorem. Etiam et tincidunt elit. Sed nec augue turpis!

Aenean sed porta ex, vel hendrerit turpis. Integer sed tincidunt nisi. Etiam vulputate rhoncus sapien, non mollis urna convallis vitae. Mauris et commodo lorem, a lacinia tortor. Donec tempor non justo quis aliquam. Sed nec dolor id nisi tincidunt faucibus. Duis pulvinar ante eget elit rutrum tristique.

  1. Mauris feugiat augue at luctus varius! Morbi eget nulla libero.
  2. Maecenas ornare vitae sem sit amet suscipit. Phasellus tortor mi, mollis et auctor sit amet, bibendum quis nibh. Nam eu pellentesque orci.
  3. Donec tellus nisl, dignissim eu laoreet vel, finibus at est. Morbi eu metus erat. Quisque aliquam suscipit enim non faucibus. In congue nisl ligula, id consectetur quam semper quis. Morbi tincidunt ante nec nisi interdum, et interdum libero ullamcorper. Mauris ullamcorper malesuada augue vitae convallis.
  4. Mauris dignissim laoreet risus ut pretium.

Mauris bibendum ante dolor, ac efficitur nisl auctor non. Cras dignissim urna nibh, vitae maximus sem pretium vel. Morbi luctus arcu eu risus facilisis scelerisque.

Footnote text ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan congue velit, ac ornare massa dignissim vel. Pellentesque tincidunt eu ex eget ultrices. Nam nisi sem, consequat vel facilisis eget, rutrum id ligula. Nunc tincidunt, mi id ullamcorper semper; ante augue malesuada dolor, id varius ex ligula vel nunc.

Tables

T1: Headings for both rows and columns

T1 top left corner heading Column T1A heading Column T1B heading text Column T1C heading
Row 1 heading text 1 Cell T1A1 2 Long cell content long cell content Long cell content long cell content Long cell content long cell content Long cell content long cell content Cell T1B1 value Cell T1C1
Row 2 heading 1 Cell T1A2 value 2 Cell T1B2 Cell T1C2 value
Row 3 heading text 1 Cell T1A3 2 Cell T1B3 value Cell T1C3
Row 4 heading 1 Cell T1A4 value 2 Cell T1B4 Cell T1C4 value
Row 5 heading text 1 Cell T1A5 2 Cell T1B5 value Cell T1C5

Footnote 1 text lorem ipsum dolor sit amet Praesent nec tortor tortor. In ultrices laoreet est, ac faucibus velit auctor id. Nam placerat sem sed blandit congue. Sed auctor metus ut vulputate dignissim. Vivamus a turpis molestie; imperdiet magna quis, imperdiet est.

Footnote 2 text lorem ipsum dolor sit amet Praesent nec tortor tortor. In ultrices laoreet est, ac faucibus velit auctor id. Nam placerat sem sed blandit congue. Sed auctor metus ut vulputate dignissim. Vivamus a turpis molestie; imperdiet magna quis, imperdiet est.

T2: Headings only for columns

Column T2A heading text Column T2B heading Column T2C heading text Column T2B heading
Cell T2A1 Cell T2B1 value Cell T2C1 Cell T2D1 value
Cell T2A2 value Cell T2B2 Cell T2C2 value Cell T2D2
Cell T2A3 Cell T2B3 value Cell T2C3 Cell T2D3 value
Cell T2A4 value Cell T2B4 Cell T2C4 value Cell T2D4
Cell T2A5 Cell T2B5 value Cell T2C5 Cell T2D5 value

T3: Headings only for rows (not recommended)

Row 1 heading text Cell T3B1 value Cell T3C1 Cell T3D1 value
Row 2 heading Cell T3B2 Cell T3C2 value Cell T3D2
Row 3 heading text Cell T3B3 value Cell T3C3 Cell T3D3 value
Row 4 heading Cell T3B4 Cell T3C4 value Cell T3D4
Row 5 heading text Cell T3B5 value Cell T3C5 Cell T3D5 value

T4: No headings at all (not recommended)

Cell T4A1 value Cell T4B1 value Cell T4C1 Cell T4D1 value
Cell T4A2 Cell T4B2 Cell T4C2 value Cell T4D2
Cell T4A3 value Cell T4B3 value Cell T4C3 Cell T4D3 value
Cell T4A4 Cell T4B4 Cell T4C4 value Cell T4D4
Cell T4A5 value Cell T4B5 value Cell T4C5 Cell T4D5 value

T5: Table with number columns

T5 top left corner heading Column T4A heading text Column T5B number heading Column T5C number heading text
Row 1 heading text T5A1 text T5B1 number value T5C1 number
Row 2 heading T5A2 text value T5B2 number T5C2 number value
Row 3 heading text T5A3 text T5B3 number value T5C3 number
Row 4 heading T5A4 text value T5B4 number T5C4 number value
Row 5 heading text T5A5 text T5B5 number value T5C5 number

T6: Headings only for columns, Long cell and heading content

Column T2A long heading text lorem ipsum dolor sit amet lorem ipsum Column T2B heading
Cell T2A1 Cell T2B1 value long cell content lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

Content continues after line break lorem ipsum dolor sit amet
Cell T2A2 value Cell T2B2 value long cell content lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

Content continues after line break lorem ipsum dolor sit amet
Cell T2A3 Cell T2B3 value long cell content lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

Content continues after line break lorem ipsum dolor sit amet
Cell T2A4 value Cell T2B4 value long cell content lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

Content continues after line break lorem ipsum dolor sit amet
Cell T2A5 Cell T2B5 value long cell content lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

Content continues after line break lorem ipsum dolor sit amet

Various elements

Top-left border separator decoration

Normal separator

.separators .simple.demo .content
{
    @include separator;
}

Inverted separator

.separators .inverted.demo .content
{
    @include inverted-separator;
}

Separated title

Normal separated title

.separated-titles .simple.demo h3
{
    @include separated-title;
}

Inverted separated title

.separated-titles .inverted.demo h3
{
    @include inverted-separated-title;
}

Icons

Presentation icons

A presentationicon icon is any icon which could be removed from the page and the respective element (e.g., a link) would still make sense to sighted users. Usually an icon is a presentation icon if the element also contains text. Examples of presenation icons include bullets next to list items, icons inside text links and buttons with text, etc.

Use CSS

Presentation icons should be added via CSS generated content instead of being present in HTML source.

To do this, use the svg-image-data-url SASS mixin.

For example, this paragraph ends with a checkmark.

.presentation.icons .css.example
{
    &:after
    {
        display: inline-block;
        content: svg-image-data-url("checkmark");
    }
}

Presentation icons are defined in svg-images.scss .

Explicitly provide color

Icons generated via data URLs are not part of the DOM and thus do not inherit any styles.

This means that the color must be included in the data URL itself.

The svg-image-data-url mixin accepts a $fill argument.

This paragraph begins with a grey checkmark that changes to red on hover.

.presentation.icons .color.example
{
    &:before
    {
        display: inline-block;
        content: svg-image-data-url("checkmark", $fill: $color-text-lightest);
    }
    &:hover:before
    {
        content: svg-image-data-url("checkmark", $fill: $color-brand);
    }
}

Use SVGs of correct size

Since CSS styles cannot be applied to the content coming from data URLs, the size of these icons cannot be controlled via CSS and must be correctly set in the SVG definition inside the svg-images.scss file.

Use predefined mixins for common scenarios

Some presentation icons are used throughout the site and have their own mixins.

A link may have a right-pointing chevron

  .presentation.icons .chevron-right.example
  {
      @include small-text;

      a
      {
          @include chevron-right;
      }
  }

There is an inverted version also

  .presentation.icons .inverted .chevron-right.example
  {
      @include small-text;

      a
      {
          @include inverted-chevron-right;
      }
  }

Or a left-pointing one

  .presentation.icons .chevron-left.example
  {
      @include small-text;

      a
      {
          @include chevron-left;
      }
  }

There is an inverted version also

  .presentation.icons .inverted .chevron.example
  {
      @include small-text;

      a
      {
          @include inverted-chevron-left;
      }
  }

Content icons

A content icon is an icon that delivers some meaning on its own and does not merely supplement other visible data.

Content icons are rendered in HTML and must always contain an accessible text alternative.

Content icons are much rarer. An example would be the following table:

Area of operation Latvia Estonia Lithuania
Banking Yes Yes Yes
Leasing Yes Yes Yes
Asset management Yes Yes Yes
Pernsion fund management Yes Yes Yes

In this table, all cell contents are rendered as follows:

  %td= svg_icon_tag :check, title: t("Yes")

Content icons are defined in images.svg image sprite file.

check chevron-down chevron-left chevron-right chevron-up close download