Typogrphy

Magento UI library provides mixins for typography styling. To configure typography, global variables from _variables.less file are used.

To apply all Magento UI library typography, use the .lib-typography-all() mixin. It accumulates all typography mixins and sets all typography for the theme. This mixin is included in the .lib-magento-reset() mixin. So, if you use this reset, you don't have to call basic typography separately. Also, you don't have to apply this mixin to any class, just call it globally.

Additionally, Magento UI library provides number of mixins to customize typography parameters separately.

<h1>HTML Ipsum Presents <small>Sub text</small></h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat <kbd>Keyboard input</kbd> vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> <a href=#"> Aenean fermentum, elit eget tincidunt condimentum</a> </blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <pre><code> #header h1 a { display: block; width: 300px; height: 80px; } </code></pre> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <h4>Header Level 4</h4> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ol> </li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <h5>Header Level 5</h5> <dl><dt>Definition list</dt><dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd><dt>Lorem ipsum dolor sit amet</dt><dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd></dl> <h6>Header Level 6</h6>

.lib-typography-all();

Typography variables

    

        

            
Mixin variable
            
Default value
            
Comment
        
        

            
Predefined font family and font colors
        
        

            
@font-family__sans-serif
            
'Helvetica Neue', Helvetica, Arial, sans-serif
            
Sans-serif font family
        
        

            
@font-family__serif
            
Georgia, 'Times New Roman', Times, serif
            
Serif font family
        
        

            
@font-family__monospace
            
Menlo, Monaco, Consolas, 'Courier New', monospace
            
Monospace font family
        
        

            
@font-path
            
"../../fonts/"
            
Path to custom font
        
        

            
@primary__color
            
#555
            
Primary color
        
        

            
@primary__color__dark
            
darken(@primary__color, 35%) // #000
            
Dark primary color
        
        

            
@primary__color__darker
            
darken(@primary__color, 13.5%) // #111
            
Darker primary color
        
        

            
@primary__color__lighter
            
lighten(@primary__color, 23%) // #7d7d7d
            
Lighter primary color
        
        

            
@primary__color__light
            
lighten(@primary__color, 45%) // #a6a6a6
            
Light primary color
        
        

            
@border-color__base
            
darken(@page__background-color, 18%)
            
Base border color
        
        

            
@border-width__base
            
1px
            
Base border width
        
        

            
Fonts settings
        
        

            
@font-family__base
            
@font-family__sans-serif
            
Basic font family
        
        

            
@root__font-size
            
62.5%
            
Setting font-size for HTML tag, use % units
        
        

            
@font-size-ratio__base
            
1.4
            
Defines ratio between root font size and base font size
        
        

            
@font-size__base
            
unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)
            
Base font size value in px
        
        

            
@font-size__xl
            
ceil(1.5 * @font-size__base) // 21
            
Extra large font size
        
        

            
@font-size__l
            
ceil(1.25 * @font-size__base) // 18
            
Large font size
        
        

            
@font-size__s
            
ceil(.85 * @font-size__base) // 12
            
Small font size
        
        

            
@font-size__xs
            
floor(.75 * @font-size__base) // 11
            
Extra small font size
        
        

            
@font-weight__regular
            
400
            
Basic font weight
        
        

            
@font-weight__light
            
200
            
Light font weight
        
        

            
@font-weight__semibold
            
600
            
Semibold font weight
        
        

            
@font-weight__bold
            
700
            
Bold font weight
        
        

            
@font-style__base
            
normal
            
Font style
        
        

            
@font-style__emphasis
            
italic
            
Emphasis font style
        
        

            
@line-height__base
            
1.428571429
            
Base line height
        
        

            
@line-height__computed
            
floor(@font-size__base * @line-height__base)
            
Computed line height depending on base font size
        
        

            
@line-height__l
            
1.5
            
Large line height
        
        

            
@line-height__s
            
1.33
            
Small line height
        
        

            
@text__color
            
@primary__color
            
Primary text color
        
        

            
@text__color__intense
            
@primary__color__darker
            
Darker text color
        
        

            
@text__color__muted
            
@primary__color__lighter
            
Lighter text color
        
        

            
@indent__base
            
@line-height__computed // 20px
            
Base text ident (20px)
        
        

            
@indent__xl
            
@line-height__computed * 2 // 40px
            
Extra large text ident (40px)
        
        

            
@indent__l
            
@line-height__computed * 1.5 // 30px
            
Large text ident (30px)
        
        

            
@indent__m
            
@indent__base * 1.25 // 25px
            
Extra large text ident (25px)
        
        

            
@indent__s
            
@line-height__computed / 2 //10px 
            
Small text ident (10px)
        
        

            
@indent__xs
            
@line-height__computed / 4 // 5px
            
Extra small text ident (5px)
        
        

            
Links
        
        

            
@link__color
            
#1979c3
            
Links color
        
        

            
@link__text-decoration
            
none
            
Links text decoration
        
        

            
@link__visited__color
            
#800080
            
Visited links color
        
        

            
@link__visited__text-decoration
            
none
            
Visited links text decoration
        
        

            
@link__hover__color
            
#006bb4
            
Hovered links color
        
        

            
@link__hover__text-decoration
            
underline
            
Hovered links text decoration
        
        

            
@link__active__color
            
#ff5501
            
Active links color
        
        

            
@link__active__text-decoration
            
underline
            
Active links text decoration
        
        

            
Lists
        
        

            
@list__color__base
            
false
            
List text color
        
        

            
@list__font-size__base
            
@font-size__base
            
List font size
        
        

            
@list__margin-top
            
0
            
List margin top
        
        

            
@list__margin-bottom
            
@indent__m
            
List margin bottom
        
        

            
@list-item__margin-top
            
0
            
List item margin top
        
        

            
@list-item__margin-bottom
            
@indent__s
            
List item margin bottom
        
        

            
Definition list
        
        

            
@dl__margin-top
            
0
            
Definition list margin top
        
        

            
@dl__margin-bottom
            
@indent__base
            
Definition list margin bottom
        
        

            
@dt__margin-top
            
0
            
Description term margin top
        
        

            
@dt__margin-bottom
            
@indent__xs
            
Description term margin bottom
        
        

            
@dt__font-weight
            
@font-weight__bold
            
Description term 
        
        

            
@dd__margin-top
            
0
            
Description margin top
        
        

            
@dd__margin-bottom
            
@indent__s
            
Description margin bottom
        
        

            
Paragraphs
        
        

            
@p__margin-top
            
0
            
Paragraph margin top
        
        

            
@p__margin-bottom
            
@indent__s
            
Paragraph margin bottom
        
        

            
Headings
        
        

            
@heading__font-family__base
            
false
            
Heading base font family
        
        

            
@heading__font-style__base
            
false
            
Heading base font style
        
        

            
@heading__font-weight__base
            
@font-weight__light
            
Heading base font weight
        
        

            
@heading__line-height__base
            
1.1
            
Heading base line height
        
        

            
@heading__color__base
            
false
            
Heading base color
        
        

            
@heading__margin-top__base
            
@indent__base
            
Heading base margin top
        
        

            
@heading__margin-bottom__base
            
@indent__base
            
Heading base margin bottom
        
        

            
H1
        
        

            
@h1__font-size
            
ceil((@font-size__base * 2.85)) // 40px
            
H1 font size
        
        

            
@h1__font-color
            
@heading__color__base
            
H1 color
        
        

            
@h1__font-family
            
@heading__font-family__base
            
H1 font family
        
        

            
@h1__font-weight
            
@heading__font-weight__base
            
H1 font weight
        
        

            
@h1__font-style
            
@heading__font-style__base
            
H1 font style
        
        

            
@h1__line-height
            
@heading__line-height__base
            
H1 line height
        
        

            
@h1__margin-top
            
0
            
H1 margin top
        
        

            
@h1__margin-bottom
            
@heading__margin-bottom__base
            
H1 margin bottom
        
        

            
H2
        
        

            
@h2__font-size
            
ceil((@font-size__base * 1.85)) // 26px
            
H2 font size
        
        

            
@h2__font-color
            
@heading__color__base
            
H2 color
        
        

            
@h2__font-family
            
@heading__font-family__base
            
H2 font family
        
        

            
@h2__font-weight
            
@heading__font-weight__base
            
H2 font weight
        
        

            
@h2__font-style
            
@heading__font-style__base
            
H2 font style
        
        

            
@h2__line-height
            
@heading__line-height__base
            
H2 line height
        
        

            
@h2__margin-top
            
@indent__m
            
H2 margin top
        
        

            
@h2__margin-bottom
            
@heading__margin-bottom__base
            
H2 margin bottom
        
        

            
H3
        
        

            
@h3__font-size
            
ceil((@font-size__base * 1.28)) // 18px
            
H3 font size
        
        

            
@h3__font-color
            
@heading__color__base
            
H3 color
        
        

            
@h3__font-family
            
@heading__font-family__base
            
H3 font family
        
        

            
@h3__font-weight
            
@heading__font-weight__base
            
H3 font weight
        
        

            
@h3__font-style
            
@heading__font-style__base
            
H3 font style
        
        

            
@h3__line-height
            
@heading__line-height__base
            
H3 line height
        
        

            
@h3__margin-top
            
@indent__base * .75
            
H3 margin top
        
        

            
@h3__margin-bottom
            
@indent__s
            
H3 margin bottom
        
        

            
H4
        
        

            
@h4__font-size
            
@font-size__base // 14px
            
H4 font size
        
        

            
@h4__font-color
            
@heading__color__base
            
H4 color
        
        

            
@h4__font-family
            
@heading__font-family__base
            
H4 font family
        
        

            
@h4__font-weight
            
@font-weight__bold
            
H4 font weight
        
        

            
@h4__font-style
            
@heading__font-style__base
            
H4 font style
        
        

            
@h4__line-height
            
@heading__line-height__base
            
H4 line height
        
        

            
@h4__margin-top
            
@heading__margin-top__base
            
H4 margin top
        
        

            
@h4__margin-bottom
            
@heading__margin-bottom__base
            
H4 margin bottom
        
        

            
H5
        
        

            
@h5__font-size
            
ceil((@font-size__base * .85)) // 12px
            
H5 font size
        
        

            
@h5__font-color
            
@heading__color__base
            
H5 color
        
        

            
@h5__font-family
            
@heading__font-family__base
            
H5 font family
        
        

            
@h5__font-weight
            
@font-weight__bold
            
H5 font weight
        
        

            
@h5__font-style
            
@heading__font-style__base
            
H5 font style
        
        

            
@h5__line-height
            
@heading__line-height__base
            
H5 line height
        
        

            
@h5__margin-top
            
@heading__margin-top__base
            
H5 margin top
        
        

            
@h5__margin-bottom
            
@heading__margin-bottom__base
            
H5 margin bottom
        
        

            
H6
        
        

            
@h6__font-size
            
ceil((@font-size__base * .7)) // 10px
            
H6 font size
        
        

            
@h6__font-color
            
@heading__color__base
            
H6 color
        
        

            
@h6__font-family
            
@heading__font-family__base
            
H6 font family
        
        

            
@h6__font-weight
            
@heading__font-weight__base
            
H6 font weight
        
        

            
@h6__font-style
            
@heading__font-style__base
            
H6 font style
        
        

            
@h6__line-height
            
@heading__line-height__base
            
H6 line height
        
        

            
@h6__margin-top
            
@heading__margin-top__base
            
H6 margin top
        
        

            
@h6__margin-bottom
            
@heading__margin-bottom__base
            
H6 margin bottom
        
        

            
<small> tags and tags with class .small placed in H1-H6 headings
        
        

            
@heading__small-color
            
@primary__color
            
<small> and .small heading element color
        
        

            
@heading__small-line-height
            
1
            
<small> and .small heading element line height
        
        

            
@heading__small-size
            
(@font-size__xs/@font-size__base) * 100%
            
<small> and .small heading element font size
        
        

            
Focus
        
        

            
@focus__box-shadow
            
0 0 3px 1px @focus__color
            
Focused element highlight
        
        

            
Code blocks
        
        

            
@code__background-color
            
@panel__background-color
            
Code block background
        
        

            
@code__color
            
@primary__color__darker
            
Code text color
        
        

            
@code__font-size
            
@font-size__s
            
Code font size
        
        

            
@code__padding
            
2px 4px
            
Code padding
        
        

            
@pre__background-color
            
@primary__color__light
            
Preformatted text background color
        
        

            
@pre__border-color
            
@border-color__base
            
Preformatted text border color
        
        

            
@pre__border-width
            
@border-width__base
            
Preformatted text border width
        
        

            
@pre__color
            
@primary__color__darker
            
Preformatted text color
        
        

            
@kbd__background-color
            
@panel__background-color
            
Keyboard input background
        
        

            
@kbd__color
            
@primary__color__darker
            
Keyboard input text color
        
        

            
Blockquote
        
        

            
@blockquote__border-color
            
@border-color__base
            
Blockquote border color
        
        

            
@blockquote__border-width
            
0
            
Blockquote border width
        
        

            
@blockquote__content-before
            
'\2014 \00A0'
            
"-" and space symbols
        
        

            
@blockquote__font-size
            
@font-size__base
            
Blockquote font size
        
        

            
@blockquote__font-style
            
@font-style__emphasis
            
Blockquote font style
        
        

            
@blockquote__margin
            
 0 0 @indent__base @indent__xl
            
Blockquote margin
        
        

            
@blockquote__padding
            
0
            
Blockquote padding
        
        

            
@blockquote-small__color
            
@primary__color
            
Blockquote <small> and .small text color
        
        

            
@blockquote-small__font-size
            
@font-size__xs
            
Blockquote <small> and .small font size
        
        

            
Cite
        
        

            
@cite__font-style
            
@font-style__base
            
Cite font style
        
        

            
Other elements
        
        

            
@hr__border-color
            
@border-color__base
            
HR border color
        
        

            
@hr__border-style
            
solid
            
HR border style
        
        

            
@hr__border-width
            
@border-width__base
            
HR border width
        
        

            
@mark__color
            
@primary__color__dark
            
<mark> color
        
        

            
@mark__background-color
            
@panel__background-color
            
<mark> background
        
        

            
@abbr__border-color
            
@border-color__base
            
<abbr> border color
        
        

            
@disable-filters
            
false
            
Disable filters output in css
        
    
  

Font-size mixin

The .lib-font-size() mixin calculates font-size in rem with fallback in px

Less code:

  .example-typography-1 {
      .lib-font-size(25);
  }

CSS result:

  .example-typography-1 {
      font-size: 25px;
      font-size: 2.5rem;
  }

<p class="example">HTML Ipsum Presents</p>

.example {
    .lib-font-size(25);
}

Line-height mixin

The .lib-line-height() mixin calculates line-height in rem with fallback in px

Less code:

  .example-line-height {
      .lib-line-height(30);
  }

CSS result:

  .example-line-height {
      line-height: 30px;
      line-height: 3rem;
  }

<p class="example-line-height">HTML Ipsum Presents</p>

.example-line-height {
    .lib-line-height(30);
}

Word breaking mixin

The .lib-wrap-words() mixin specifies word breaking rules. Background and block width are added to display this example.

<p class="example-word-wrap"> Supercalifragilisticexpialidocious This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. </p>

.example-word-wrap {
    .lib-wrap-words();
    background: #ccc;
    width: 120px;
}

Font face mixin

The .lib-font-face() mixin is used to set up custom font.

    .lib-font-face(
        @family-name,
        @font-path,
        @font-weight: normal,
        @font-style: normal
    ) {
        @font-face {
            font-family: @family-name;
            src: url('@{font-path}.eot');
            src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
            url('@{font-path}.woff2') format('woff2'),
            url('@{font-path}.woff') format('woff'),
            url('@{font-path}.ttf') format('truetype'),
            url('@{font-path}.svg#@{family-name}') format('svg');
            font-weight: @font-weight;
            font-style: @font-style;
        }
    }

 

Text overflow mixin

The .lib-text-overflow() mixin is used to add ellipsis ("...") when a text overflows the containing element. Background and block width are added to display this example.

<p class="example-text-overflow"> Supercalifragilisticexpialidocious </p>

.example-text-overflow {
    .lib-text-overflow();
    background: #ccc;
    width: 120px;
}

Text hide

The .lib-text-hide() mixin hides a text of the element the mixin is applyed to.

<p class="example-text-hide"> Text to hide </p>

.example-text-hide {
    .lib-text-hide();
}

Hyphens

The .lib-hyphens() mixin sets hyphens CSS property with browser prefixes. It accepts the @mode variable with following accessible values:

  none
  manual
  auto

Here are two examples with different setup:

<p class="example-hyphens" style="width:50px;" lang="en"> An extremely long English word </p> <p class="example-hyphens-none" style="width:50px;" lang="en"> An extremely long English word </p>

.example-hyphens {
    .lib-hyphens();
}

.example-hyphens-none {
    .lib-hyphens(none);
}

Font style and color

The .lib-typography() mixin is used to set font style and font color of the element.

<span class="example-typography"> An example of using .lib-typography() mixin </span>

.example-typography {
    .lib-typography(30, #fc0, @font-family__monospace, 500, 1.2, italic);
}

Font style mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_color
            
@text__color
            
'' | false | value
            
Text color
        
        

            
@_font-size
            
@font-size__base
            
'' | false | value
            
Font size
        
        

            
@_font-family
            
@font-family__base
            
'' | false | value
            
Font family
        
        

            
@_font-weight
            
@font-weight__regular
            
'' | false | value
            
Font weight
        
        

            
@_font-style
            
@font-style__base
            
'' | false | value
            
Font style
        
        

            
@_line-height
            
@line-height__base
            
'' | false | value
            
Line height
        
    
  

Reset list styles

The .lib-list-reset-styles() mixin resets browser default list style and sets its margins and paddings.

Default list style:

<ul class="example-list"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

List with .lib-list-reset-styles() mixin applied:

<ul class="example-list-reset-styles"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

.example-list-reset-styles {
    .lib-list-reset-styles();
}

Reset list styles variables

    

        

            
Mixin variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_margin
            
0
            
'' | false | value
            
List margin
        
        

            
@_padding
            
0
            
'' | false | value
            
List padding
        
    
  

Inline-block list item styling

The .lib-list-inline() mixin resets browser default list style and sets its list items display property to display: inline-block.

Default list style:

<ul class="example-list"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

List with .lib-list-inline() mixin applied:

<ul class="example-list-inline"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

.example-list-inline {
    .lib-list-inline();
}

Link styling mixin

The .lib-link() mixin is used to set styles for all links states.

<a href="#" class="example-link-default">Link with global variables customization</a> <a href="#" class="example-link">Link with custom styles</a>

.example-link-default {
    .lib-link();
}

.example-link {
    .lib-link(@_link-color: green, @_link-color-hover: orange, @_link-text-decoration-hover: none );
}

Link styling mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_link-color
            
#1979c3
            
'' | false | value
            
Default link color
        
        

            
@_link-text-decoration
            
underline
            
'' | false | value
            
Default link text decoration
        
        

            
@_link-color-visited
            
#800080
            
'' | false | value
            
Visited link color
        
        

            
@_link-text-decoration-visited
            
underline
            
'' | false | value
            
Visited link text decoration
        
        

            
@_link-color-hover
            
#006bb4
            
'' | false | value
            
Hovered link color
        
        

            
@_link-text-decoration-hover
            
underline
            
'' | false | value
            
Hovered link text decoration
        
        

            
@_link-color-active
            
#ff5501
            
'' | false | value
            
Active link color
        
        

            
@_link-text-decoration-active
            
underline
            
'' | false | value
            
Active link text decoration
        
    
  

Heading styling mixin

The .lib-heading() mixin is used to set heading styles to an element. To use this mixin, set the type of heading that you want to inherit styles from. The mixin uses global heading variables.

<h1 class="example-heading">Example heading</h1> <h2 class="example-heading-2">Example heading</h2>

.example-heading {
    .lib-heading(h1);
}
.example-heading-2 {
    .lib-heading(h2);
}

Base typography mixins

Magento UI library offers mixins to styles elements sets.

The .lib-typography__base() mixin applyes basic styles from _variables.less to the following elements:

  html
  body
  p
  abbr
  b
  strong
  em
  i
  mark
  small
  .small
  hr
  sub,
  sup
  dfn

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac <small>turpis</small> egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, <em>tempor</em> sit amet, ante. Donec _eu libero sit amet quam egestas semper. <code>Aenean ultricies</code> mi vitae ^est. Mauris placerat eleifend leo. <abbr>Quisque</abbr> sit amet est et sapien <mark>ullamcorper</mark> pharetra.</p> <hr> <p><dfn>Pellentesque</dfn> habitant <i>morbi</i> tristique <b>senectus</b> et netus et malesuada fames ac turpis egestas.</p>

.lib-typography__base();

Base typography mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_abbr-border-color
            
@abbr__border-color
            
@border-color__base
            
'' | false | value
            
<abbr> border color
        
        

            
@_dfn-font-style
            
@font-style__emphasis
            
italic
            
'' | false | value
            
<dfn> font style
        
        

            
@_emphasis-font-style
            
@font-style__emphasis
            
italic
            
'' | false | value
            
<em> font style
        
        

            
@_hr-border-color
            
@hr__border-color
            
@border-color__base
            
'' | false | value
            
HR border color
        
        

            
@_hr-border-style
            
@hr__border-style
            
solid
            
'' | false | value
            
HR border style
        
        

            
@_hr-border-width
            
@hr__border-width
            
@border-width__base
            
'' | false | value
            
HR border width
        
        

            
@_hr-margin-bottom
            
@line-height__computed
            
floor(@font-size__base * @line-height__base)
            
'' | false | value
            
HR margin bottom
        
        

            
@_hr-margin-top
            
@line-height__computed
            
floor(@font-size__base * @line-height__base)
            
'' | false | value
            
HR margin top
        
        

            
@_mark-background-color
            
@mark__background-color
            
@panel__background-color
            
'' | false | value
            
<mark> background color
        
        

            
@_mark-color
            
@mark__color
            
@primary__color__dark
            
'' | false | value
            
<mark> color
        
        

            
@_p-margin-bottom
            
@p__margin-bottom
            
@indent__s
            
'' | false | value
            
Paragraph margin bottom
        
        

            
@_p-margin-top
            
@p__margin-top
            
0
            
'' | false | value
            
Paragraph margin top
        
        

            
@_root-font-size
            
@root__font-size
            
62.5%
            
'' | false | value
            
Setting font-size for HTML tag
        
        

            
@_small-font-size
            
@font-size__s
            
ceil(.85 * @font-size__base) // 12
            
'' | false | value
            
<small> tag font size
        
        

            
@_strong-font-weight
            
@font-weight__bold
            
700
            
'' | false | value
            
<strong> tag font weight
        
        

            
@_sub-sup-font-size
            
-
            
(@font-size__xs / @font-size__base) * 100%
            
'' | false | value
            
<sup> an <sup> tags font size
        
    
  

Headings typography mixin

The .lib-typography-headings() mixin is used to style all H1-H6 headings. This mixin uses settings from global variables list.

<h1>Header Level 1</h1> <h2>Header Level 2</h2> <h3>Header Level 3</h3> <h4>Header Level 4</h4> <h5>Header Level 5</h5> <h6>Header Level 2</h6>

.lib-typography-headings();

Headings typography mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_heading-small-size
            
@heading__small-size
            
(@font-size__xs/@font-size__base) * 100%
            
'' | false | value
            
<small> and .small heading element font-size
        
        

            
@_heading-small-color
            
@heading__small-color
            
@primary__color
            
'' | false | value
            
<small> and .small heading element color
        
        

            
@_heading-small-line-height
            
@heading__small-line-height
            
1
            
'' | false | value
            
<small> and .small heading element line height
        
    
  

Typography links mixin

The .lib-typography-links() mixin is used to apply default styles to all <a> elements and elements with class="alink". This mixin uses settings from global variables list.

<a href="#">Link with global variables customization</a> <span class="alink">Span styled as a link</span>

.lib-typography-links();

Typography lists mixin

The .lib-typography-lists() mixin is used to apply styles to all ordered, unordered, and definition lists. This mixin uses settings from global variables list.

<ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ol> </li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <dl> <dt>Definition list</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd> <dt>Lorem ipsum dolor sit amet</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd> </dl>

.lib-typography-lists();

Typography lists mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_list-margin-top
            
@list__margin-top
            
0
            
'' | false | value
            
List margin top
        
        

            
@_list-margin-bottom
            
@list__margin-bottom
            
@indent__m
            
'' | false | value
            
List margin bottom
        
        

            
@_list-item-margin-top
            
@list-item__margin-top
            
0
            
'' | false | value
            
List item margin top
        
        

            
@_list-item-margin-bottom
            
@list-item__margin-bottom
            
@indent__s
            
'' | false | value
            
List item margin bottom
        
        

            
@_dl-margin-bottom
            
@dl__margin-bottom
            
@indent__base
            
'' | false | value
            
Definition list margin bottom
        
        

            
@_dl-margin-top
            
@dl__margin-top
            
0
            
'' | false | value
            
Definition list margin top
        
        

            
@_dt-font-weight
            
@dt__font-weight
            
@font-weight__bold
            
'' | false | value
            
Description term font weight
        
        

            
@_dt-margin-bottom
            
@dt__margin-bottom
            
@indent__xs
            
'' | false | value
            
Description term margin bottom
        
        

            
@_dt-margin-top
            
@dt__margin-top
            
0
            
'' | false | value
            
Description term margin top
        
        

            
@_dd-margin-bottom
            
@dd__margin-bottom
            
@indent__s
            
'' | false | value
            
Description margin bottom
        
        

            
@_dd-margin-top
            
@dd__margin-top
            
0
            
'' | false | value
            
Description margin top
        
    
  

Typography code elements mixin

.lib-typography-code() mixin is used to apply styles to the following code elements:

  code
  kbd
  pre
  samp

This mixin uses settings from global variables list.

<p>Lorem ipsum dolor sit amet, <samp>consectetur adipiscing elit<samp>. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</p> <pre><code> #header h1 a { display: block; width: 300px; height: 80px; } </code></pre> <p>Vestibulum tortor quam, feugiat <kbd>Keyboard input</kbd> vitae, ultricies eget, tempor sit amet, ante.</p>

.lib-typography-code();

Typography code mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_font-family-monospace
            
@font-family__monospace
            
Menlo, Monaco, Consolas, 'Courier New', monospace
            
'' | false | value
            
Monospace font family
        
        

            
@_code-background-color
            
@code__background-color
            
@panel__background-color
            
'' | false | value
            
Code block background
        
        

            
@_code-color
            
@code__color
            
@primary__color__darker
            
'' | false | value
            
Code text color
        
        

            
@_code-padding
            
@code__padding
            
2px 4px
            
'' | false | value
            
Code block padding
        
        

            
@_code-font-size
            
@code__font-size
            
@font-size__s
            
'' | false | value
            
Code block font size
        
        

            
@_kbd-background-color
            
@kbd__background-color
            
@panel__background-color
            
'' | false | value
            
Keyboard input background
        
        

            
@_kbd-color
            
@kbd__color
            
@primary__color__darker
            
'' | false | value
            
Keyboard input text color
        
        

            
@_kbd-padding
            
@code__padding
            
2px 4px
            
'' | false | value
            
Keyboard input padding
        
        

            
@_kbd-font-size
            
@code__font-size
            
@font-size__s
            
'' | false | value
            
Keyboard input font size
        
        

            
@_pre-background-color
            
@pre__background-color
            
@primary__color__light
            
'' | false | value
            
Preformatted text background color
        
        

            
@_pre-border-width
            
@pre__border-width
            
@border-width__base
            
'' | false | value
            
Preformatted text border width
        
        

            
@_pre-border-color
            
@pre__border-color
            
@border-color__base
            
'' | false | value
            
Preformatted text border color
        
        

            
@_pre-color
            
@pre__color
            
@primary__color__darker
            
'' | false | value
            
Text color of preformatted text
        
        

            
@_pre-line-height
            
@line-height__base
            
1.428571429
            
'' | false | value
            
Preformatted text line height
        
        

            
@_pre-margin
            
-
            
0 0 @indent__s
            
'' | false | value
            
Preformatted text margin
        
        

            
@_pre-padding
            
-
            
@indent__s
            
'' | false | value
            
Preformatted text padding
        
        

            
@_pre-font-size
            
@code__font-size
            
@font-size__s
            
'' | false | value
            
Preformatted text font size
        
    
  

Typography blockquote

The .lib-typography-blockquote() mixin is used to apply styles to blockquote elements. This mixin uses settings from global variables list.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> <a href="#">Author quotes</a> </blockquote>

.lib-typography-blockquote();

Typography blockquote mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_blockquote-border-width
            
@blockquote__border-width
            
0
            
'' | false | value
            
Blockquote border width
        
        

            
@_blockquote-border-color
            
@blockquote__border-color
            
@border-color__base
            
'' | false | value
            
Blockquote border color
        
        

            
@_blockquote-margin
            
@blockquote__margin
            
0 0 @indent__base @indent__xl
            
'' | false | value
            
Blockquote margin
        
        

            
@_blockquote-padding
            
@blockquote__padding
            
0
            
'' | false | value
            
Blockquote padding
        
        

            
@_blockquote-font-size
            
@blockquote__font-size
            
@font-size__base
            
'' | false | value
            
Blockquote font size
        
        

            
@_blockquote-font-style
            
@blockquote__font-style
            
@font-style__emphasis
            
'' | false | value
            
Blockquote font style
        
        

            
@_blockquote-small-color
            
@blockquote-small__color
            
@primary__color
            
'' | false | value
            
Blockquote <small> and .small text color
        
        

            
@_blockquote-small-line-height
            
@line-height__base
            
1.428571429
            
'' | false | value
            
Blockquote <small> and .small line height
        
        

            
@_blockquote-small-font-size
            
@blockquote-small__font-size
            
@font-size__xs
            
'' | false | value
            
Blockquote <small> and .small text font size
        
        

            
@_blockquote-small-before-content
            
@blockquote__content-before
            
'\2014 \00A0'
            
'' | false | value
            
Blockquote <small> and .small before pseudo element content
        
        

            
@_blockquote-cite
            
@cite__font-style
            
@font-style__base
            
'' | false | value
            
Blockquote cite font style
        
        

            
@_cite
            
@cite__font-style
            
@font-style__base
            
'' | false | value
            
Cite font style