Deprecated - contains information about version 17 of the IDS librarySeedesign.if.eufor the latest documentation

CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window

Bundle

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/typography@17.0.30-alpha.8

New Style Typography (used in Figma)

Typography

Table of Contents

Edit this section, Opens in new window

Usage

Hero title

The quick brown fox jumps over the lazy dog

Hero title

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading hero-title">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Hero()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Hero;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Hero();
}

Heading largest

The quick brown fox jumps over the lazy dog

Heading largest

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading largest">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Largest()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Largest;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Largest();
}

Heading larger

The quick brown fox jumps over the lazy dog

Heading larger

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading larger">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Larger()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Larger;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Larger();
}

Heading large

The quick brown fox jumps over the lazy dog

Heading large

As in current viewport

Medium mobile
Usage with class
<h2 class="if heading large">The quick brown fox jumps over the lazy dog</h2>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Large()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Large;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Large();
}

Heading medium

The quick brown fox jumps over the lazy dog

Heading medium

As in current viewport

Medium mobile
Usage with class
<h3 class="if heading medium">The quick brown fox jumps over the lazy dog</h3>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Medium()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Medium;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Medium();
}

Heading small

The quick brown fox jumps over the lazy dog

Heading small

As in current viewport

Medium mobile
Usage with class
<h4 class="if heading small">The quick brown fox jumps over the lazy dog</h4>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Small()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Small;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Small();
}

Heading smallest

The quick brown fox jumps over the lazy dog

Heading smallest

As in current viewport

Medium mobile
Usage with class
<h5 class="if heading smallest">The quick brown fox jumps over the lazy dog</h5>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Smallest()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Smallest;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Smallest();
}

Lead text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.

Lead text

As in current viewport

Medium mobile
Usage with class
<p class="if text lead">The quick brown fox jumps over the lazy dog</p>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Lead()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Lead;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Lead();
}

Body text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Body text

As in current viewport

Medium mobile
Usage with class
<p class="if text body">
    Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The
    Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea
    how long it takes those cups to decompose. God help us, we're in the hands of engineers.
</p>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Body()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Body;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Body();
}

Meta text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Meta text

As in current viewport

Medium mobile
Usage with class
<p class="if text meta">
    Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The
    Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea
    how long it takes those cups to decompose. God help us, we're in the hands of engineers.
</p>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Meta()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Meta;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Meta();
}

Caption text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

Caption text

As in current viewport

Medium mobile
Usage with class
<figcaption class="if text caption">
    Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
</figcaption>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Caption()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Caption;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Caption();
}

Disclaimer text

Disclaimer text

As in current viewport

Medium mobile
Usage with class
<div class="if text disclaimer">
    Läs om vår <a href="" class="if">hantering av personuppgifter</a>,
    <a href="" class="if">automatisk behandling av köp</a> och hur vi arbetar med
    <a href="" class="if">uppringande kvalitetssamtal</a>.
</div>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Disclaimer()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Disclaimer;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Disclaimer();
}