Core
Border Variables
The existing variables used in all of our borders.
Examples
$border-solid-thick (3px)
$border-solid-medium (2px)
$border-solid-thin (1px)
Notes
None at this time.
Resources
| Sass File(s) | /sass/base/_variables.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Full Borders
A border that wraps around the entire element.
Examples
borderDkGray (border: $border-solid-thin $dkGray)
borderMdGray (border: $border-solid-thin $mdGray)
borderDkRed (border: $border-solid-thin $dkRed)
Code
<p class="borderDkGray padding10">Dark Gray Border</p>
<p class="borderMdGray padding10">Medium Gray Border</p>
<p class="borderDkRed padding10">Dark Red Border</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_border.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Top Borders
A border that only appears at the top of an element.
Examples
borderTopMdGrayThin (border-top: $border-solid-thin $mdGray)
borderTopMdGray (border-top: $border-solid-thick $mdGray)
borderTopBlue (border-top: $border-solid-thick $blue)
Code
<p class="borderTopMdGrayThin paddingTop5">Thin Medium Gray Top Border</p>
<p class="borderTopMdGray paddingTop5">Medium Gray Top Border</p>
<p class="borderTopBlue paddingTop5">Blue Top Border</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_border.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Bottom Borders
A border that appears at the bottom of an element.
Examples
borderBottomPurple (border-bottom: $border-solid-thick $purple)
borderBottomBlue (border-bottom: $border-solid-thick $blue)
borderBottomTeal (border-bottom: $border-solid-thick $teal)
borderBottomRed (border-bottom: $border-solid-thick $red)
borderBottomDkRed (border-bottom: $border-solid-thick $dkRed)
borderBottomMdGray (border-bottom: $border-solid-thick $mdGray)
borderBottomDkGray (border-bottom: $border-solid-thick $dkGray)
Code
<p class="borderBottomPurple">Purple Bottom Border</p>
<p class="borderBottomBlue">Blue Bottom Border</p>
<p class="borderBottomTeal">Teal Bottom Border</p>
<p class="borderBottomRed">Red Bottom Border</p>
<p class="borderBottomDkRed">Dark Red Bottom Border</p>
<p class="borderBottomMdGray">Medium Gray Bottom Border</p>
<p class="borderBottomDkGray">Dark Gray Bottom Border</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_border.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Border Radius
A border that has a radius.
Examples
roundCorners3
roundCorners5
roundCorners8
roundCorners10
roundCornersTop10
roundCornersBtm10
roundCornersLeft10
roundCornersRight10
roundCornersTopLeft10
roundCornersTopRight10
roundCornersBtmLeft10
roundCornersBtmRight10
roundCornersTopLeftBtmRight10
roundCornersTopRightBtmLeft10
makeCircle
Code
<p class="roundCorners3 bkgdMdGray">3px Radius</p>
<p class="roundCorners5 bkgdMdGray">5px Radius</p>
<p class="roundCorners8 bkgdMdGray">8px Radius</p>
<p class="roundCorners10 bkgdMdGray">10px Radius</p>
<p class="roundCornersBtm10 bkgdMdGray">10px Bottom Radius</p>
<p class="roundCornersTop10 bkgdMdGray">10px Top Radius</p>
<p class="makeCircle bkgdMdGray">Full Radius</p>
Notes
To add radius background color to icons, see SVG Library.
Resources
| Sass File(s) | /sass/core/_utility.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Colors
Colors
The 4imprint website color pallette options.
Examples
$purple #612a7d
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 97,42,125 | 22,66,0,51 |
$blue #02458B
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 2,69,139 | 99,50,0,45 |
$teal #207f7f
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 32,127,127 | 75,0,0,50 |
$green #a8c64c
Usable As Text Color?
NO
Color of Text on Background:
textDarkestGray | darkestLink
| RGB | CMYK |
|---|---|
| 168,198,76 | 39,5,90,0 |
$yellow #ffb310
Usable As Text Color?
NO
Color of Text on Background:
textDarkestGray | darkestLink
| RGB | CMYK |
|---|---|
| 255,179,16 | 0,3,94,0 |
$orange #e57700
Usable As Text Color?
NO
Color of Text on Background:
Do Not Use As Background Color
| RGB | CMYK |
|---|---|
| 255,133,0 | 0,48,100,0 |
$red #cc3333
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 204,51,51 | 0,75,75,20 |
$dkRed #800000
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 128,0,0 | 0,100,100,50 |
$ltGray #f0f0f0
Usable As Text Color?
NO
Color of Text on Background:
textDarkestGray | darkestLink
| RGB | CMYK |
|---|---|
| 240,240,240 | 4,3,3,0 |
$mdGray #d1d1d1
Usable As Text Color?
NO
Color of Text on Background:
textDarkestGray | darkestLink
| RGB | CMYK |
|---|---|
| 209,209,209 | 17,13,13,0 |
$dkGray #616161
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 97,97,97 | 0,0,0,62 |
$darkestGray #2c2c2c
Usable As Text Color?
YES
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 44,44,44 | 70,64,63,64 |
$white #fff
Usable As Text Color?
NO
Color of Text on Background:
textDarkestGray | textDkGray | textBlue
| RGB | CMYK |
|---|---|
| 255,255,255 | 0,0,0,0 |
$black #000
Usable As Text Color?
NO
Color of Text on Background:
textWhite | whiteLink
| RGB | CMYK |
|---|---|
| 0,0,0 | 0,0,0,100 |
Notes
None at this time.
Resources
| Sass File(s) | /sass/base/_variables.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Margins
Adds space to element outside of it's box.
Examples
margin5
margin10
margin15
margin20
margin40
margin50
marginLeft5
marginLeft10
marginLeft15
marginLeft20
marginLeft40
marginLeft50
marginTop5
marginTop10
marginTop15
marginTop20
marginTop40
marginTop50
marginTop100
marginTop120
marginRight5
marginRight10
marginRight15
marginRight20
marginRight40
marginRight50
marginBtm5
marginBtm10
marginBtm15
marginBtm20
marginBtm40
marginBtm50
Notes
reset class = margin: 0; padding: 0;
layoutCenter class = margin: 0 auto;
Resources
| Sass File(s) | /sass/core/_margin.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Padding
Adds space to element inside of it's box.
Examples
padding5
padding10
padding15
padding20
padding40
paddingLeft5
paddingLeft10
paddingLeft15
paddingLeft20
paddingLeft40
paddingTop2
topPad2
paddingTop5
topPad5
paddingTop10
topPad10
paddingTop15
topPad15
paddingTop20
topPad20
paddingTop40
tinySpace
smallSpace
normalSpace
largeSpace
paddingRight5
paddingRight10
paddingRight15
paddingRight20
paddingRight40
paddingBtm5
paddingBtm10
paddingBtm15
paddingBtm20
paddingBtm40
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_padding.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
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.
Display
Different ways to display your elements.
Example
hide
show
inline
inlineBlock
inlineMiddle
inlineTop
visually-hidden
Code
<div class="show"></div>
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
visually-hidden class is used to hide text visually but still allow it to be read by a screen reader.
Visibility
Hide or show elements while allowing them to take up space on the screen.
Example
invisible
visible
Code
<div class="invisible"></div>
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
None at this time.
Rotate
Rotate your element quickly with these classes.
Example
rotate45
rotate90
rotate180
rotate270
Code
<div class="rotate45"></div>
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
None at this time.
Width & Height
Adjust your elements height or width with these classes.
Example
fullWidth
fullHeight
autoWidth
autoHeight
Code
<div class="fullWidth"></div>
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
None at this time.
Rounded Corners
Easily add rounded corner to your elements.
Example
roundCorners3
roundCorners5
roundCorners8
roundCorners10
roundCornersBtm10
Code
<div class="roundCorners10"></div>
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
None at this time.
Miscellaneous
Example
layoutCenter
overflowHidden
dropdownShadow
reset
- this list has no
- padding or margins
pointer
responsiveImg
posAbsolute
posRelative
Code
<div class="layoutCenter"></div>
<div class="overflowHidden"></div>
<div class="dropdownShadow"></div>
<ul class="reset"></ul>
<div class="pointer"></div>
<img class="responsiveImg" src="" alt="" height="" width="" />
<div class="posAbsolute"></div>
<div class="posRelative"></div>
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
None at this time.