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.

.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;
  }
.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;
  }
.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.

.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.

.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.

.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:

.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.

.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:

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

.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:

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

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

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.

.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
.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.

.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 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.

.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.

.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.

.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
<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>
<p class="example">HTML Ipsum Presents</p>
<p class="example-line-height">HTML Ipsum Presents</p>
<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>
<p class="example-text-overflow"> Supercalifragilisticexpialidocious </p>
<p class="example-text-hide"> Text to hide </p>
<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>
<span class="example-typography"> An example of using .lib-typography() mixin </span>
<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>
<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>
<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>
<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>
<a href="#" class="example-link-default">Link with global variables customization</a>
<a href="#" class="example-link">Link with custom styles</a>
<h1 class="example-heading">Example heading</h1> <h2 class="example-heading-2">Example heading</h2>
<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 <sub>eu</sub> libero sit amet quam egestas semper. <code>Aenean ultricies</code> mi vitae <sup>est</sup>. 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>
<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>
<a href="#">Link with global variables customization</a>
<span class="alink">Span styled as a link</span>
<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>
<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>
<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>