Approved Fonts
Fonts that may used across the 4imprint sites.
Examples
Open Sans ($font-stack-normal)
The quick brown fox jumps over the lazy dog.
Open Sans - Semi Bold ($font-stack-semibold)
The quick brown fox jumps over the lazy dog.
Open Sans - Bold ($font-stack-bold)
The quick brown fox jumps over the lazy dog.
Caveat ($font-stack-caveat-new)
The quick brown fox jumps over the lazy dog.
Notes
Download Open Sans from Google Fonts opens in new window
Use scriptFont class for Caveat script font opens in new window.
Resources
| Sass File(s) | /sass/base/_variables.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Featured Headings
Easily distinguish headings with these styles.
Examples
Top Border
Full Background
Code
<h2 class="featHdrText fullWidth borderTopMdGray">Top Border</h2>
<h2 class="bkgdMdGray fullWidth marginBtm10 text18 textNormal padding10">Full Background</h2>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_typographyrem.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Links
Links that allow users to move to another page.
Examples
Code
<a href="#">Standard</a>
<a href="#" class="darkestLink">Darkest Link</a>
<a href="#" class="whiteLink">White Link</a>
<a href="#" class="noLine">Not Underlined</a>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_links.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Button Links
When it's essential to use a button element but want it to be styled like a link.
Examples
Code
<button type="button" class="text16 btnToHyp underline">Button</button>
Notes
Use btnToHyp class to transform a button element into a link.
Resources
| Sass File(s) | /sass/core/_buttonsresponsive.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Lists
When relaying a list of item, either ordered with numbers or unordered with bullets.
Example
- list item
- list item
Code
<ul>
<li>list item</li>
<li>list item</li>
</ul>
Notes
resetList class can be used on both ul and ol elements to remove the bulletpoints/numbers.
Resources
| Sass File(s) | /sass/core/_utility.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Only use lists when there's more than 1 li.
Text Sizes
Pre-defined text sizes.
Examples
text11
The quick brown fox jumps over the lazy dog.
text12
The quick brown fox jumps over the lazy dog.
text13
The quick brown fox jumps over the lazy dog.
text14
The quick brown fox jumps over the lazy dog.
text15
The quick brown fox jumps over the lazy dog.
text16
The quick brown fox jumps over the lazy dog.
text18
The quick brown fox jumps over the lazy dog.
text20
The quick brown fox jumps over the lazy dog.
text25
The quick brown fox jumps over the lazy dog.
text26
The quick brown fox jumps over the lazy dog.
text30
The quick brown fox jumps over the lazy dog.
text35
The quick brown fox jumps over the lazy dog.
text40
The quick brown fox jumps over the lazy dog.
text45
The quick brown fox jumps over the lazy dog.
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_typographyrem.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Text Styles
Additional classes to style your text.
Examples
superscript®
subscript®
uppercase
textNormal
textSemiBold
textBold
italic
underline
strikeOut
textLeft
textCenter
textRight
textDkRed textBold (sale text)
Code
<sup>®</sup>
<p>360° Guarantee <sub>®</sub></p>
<p><span class="uppercase">uppercase</span></p>
<h2 class="textNormal">normal</h2>
<p class="textSemiBold">semi bold</p>
<p class="textBold">bold</p>
<p><span class="italic">italic</span></p>
<p><span class="underline">underline</span></p>
<p class="strikeOut">strike out</p>
<p class="textLeft">left aligned</p>
<p class="textCenter">center aligned</p>
<p class="textRight">right aligned</p>
<p class="textDkRed textBold">sale text</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_utility.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
uppercase, italic & underline classes may only be used on heading or span elements for brief emphasis.