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
Table of Contents
Edit this section, Opens in new windowUsage
Hero title
The quick brown fox jumps over the lazy dog
As in current viewport
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
As in current viewport
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
As in current viewport
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
As in current viewport
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
As in current viewport
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
As in current viewport
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
As in current viewport
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.
As in current viewport
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.
As in current viewport
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
As in current viewport
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?
As in current viewport
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
Läs om vår hantering av personuppgifter, automatisk behandling av köp och hur vi arbetar med uppringande kvalitetssamtal.
As in current viewport
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();
}