Icons
Icons applied to components
4-1 Circle icon that displays a social network from the custom icon library
inactive icon state .icon--is_not-active
no hover state .icon--no_hover
larger icons .icon--large
teal base set of icons .icon--teal
white base set of icons .icon--white
<a class="icon fa-github [modifier class]" href="#"></a> <a class="icon fa-github [modifier class]" href="#"></a> <span class="icon fa-github [modifier class]"></span> <span class="icon fa-github [modifier class]"></span>
4-2 Icon Buttons
Icon button that displays a social network from the custom icon library
inactive icon button state .icon_button--is_not-active
no hover state .icon_button--no_hover
<a class="icon_button fa-github [modifier class]" href="#">Connect</a>
4-2-1 Icon Buttons with Formmatter
The buttons can even be used simultaneously with the display name
<a class="icon_button fa-github format-github" href="#"></a>
4-3 Icon Headers
Icon attached to a header
Social Profiles
Large icon header .icon_header--large
Social Profiles
<div class="icon_header fa-envelope [modifier class]"> Social Profiles </div>
4-3-1 Icon Header with small text
Social Profiles
With Social Networks
<div class="icon_header icon_header--large fa-github "> Social Profiles <small>With Social Networks</small> </div>
4-4 Number Bubble Icons
Usually used together with an image to number "steps". Default color is gray2, default position is top left.
- Valid
- Locked
bottom right .bubble--bottom_right
- Valid
- Locked
top right .bubble--top_right
- Valid
- Locked
bottom left .bubble--bottom_left
- Valid
- Locked
<ul class="icon_list [modifier class]"> <li class="icon_list-li fa-github">Valid</li> <li class="icon_list-li fa-lock">Locked</li> </ul>
4-4 Icon List
Lists with icons as bullets
- Valid
- Locked
Large icon list .icon_list--large
- Valid
- Locked
Top aligned icon list .icon_list--top
- Valid
- Locked
<ul class="icon_list [modifier class]"> <li class="icon_list-li fa-github">Valid</li> <li class="icon_list-li fa-lock">Locked</li> </ul>
4-4-1 Icon List items
Modifiers for the items in the icon list
- Valid
- Locked
Success coloring for the icon .icon_list-li--success
- Valid
- Locked
Item aligned to the top .icon_list-li--top
- Valid
- Locked
<ul class="icon_list"> <li class="icon_list-li fa-github [modifier class]">Valid</li> <li class="icon_list-li fa-lock [modifier class]">Locked</li> </ul>
4-5 Icon Box
Box shaped icon that house an element
<a class="icon_box fa-chevron-right [modifier class]" href="#"></a>
4-6 Draw icons
Illustrations as icons
Small illustrated icons .draw--small
IDS Shield icon .draw--shield
<div class="draw [modifier class]"></div>
4-7 Icon Attach
Icon attatchment for an element.
Small icon .icon_attach--small
<div style="position: relative; width: 100px; height: 100px; background-color: #000; border-radius: 100px;"> <div class="icon_attach fa-envelope [modifier class]" ></div> </div> <div style="position: relative; width: 100px; height: 100px; background-color: #000; border-radius: 100px;"> <div class="icon_attach draw draw--shield draw--small [modifier class]" ></div> </div>
4-8 SVG
Regulating the sizes of our svgs
Small svg .svg--small
<img class="svg [modifier class]" src="/images/illustrations/photo/selfie.svg">