Alignment

Description.

Example

<p>Example</p>

Box display

Helper class to change a default inline element to a block element, or the other way arround. Illustrated in the example where a label changes from inline to block when adding the class block.

Inline label (default)


Block label

<label for="example-inline">Inline label <small>(default)</small></label>
<input type="text" id="example-inline">

<label for="example-block" class="block">Block label</label>
<input type="text" id="example-block">

Class name	Comment
`block`	Change display to block
`inline`	Change display to inline

Clearfix

clearfix can be applied on a container that breaks because of floating elements inside it.

  
<div class="clearfix" style="border: 1px solid black;">
  <img src="http://placehold.it/200x300" alt="" style="float: right;">
</div>

Float

Position element right or left. Can be used on media and other elements that a editor would like to position in a article.

Class	Description
`.l-left`	Floats a element to the left with a gutter width on right side.
`.l-right`	Floats a element to the right with a gutter width on left side.

  
  Forklaring til bilde. Vi har gode betingelser og gir våre medarbeidere mulighet til karriere og selvrealisering.Vi legger stor vekt på faglig utvikling i DIPS og bruker mye ressurser på å bygge opp og opprettholde vår kompetanse.

<figure class="frame l-right">
  <img src="http://placehold.it/150x100" alt="">
  <figcaption>Forklaring til bilde. Vi har gode betingelser og gir våre medarbeidere mulighet til karriere og selvrealisering.Vi legger stor vekt på faglig utvikling i DIPS og bruker mye ressurser på å bygge opp og opprettholde vår kompetanse.</figcaption>
</figure>

Hide elements

Different ways to hide elements.

Example hidden link
Example hidden link
Example hidden link
<a href="" class="visuallyhidden">Example hidden link</a>
<a href="" class="visuallyhidden focusable">Example hidden link</a>
<a href="" class="invisible">Example hidden link</a>

Class name	Comment
`visuallyhidden`	Visually hide elements, but have them available for screen readers.
`focusable`	By also adding this, a link would be shown on focus.
`invisible`	Hide visually and from screenreaders, but maintain layout.

No-space

Remove space on a element.

Class	Description
`nospace`	Remove space arround all edges of a element
`nospace-top`	Remove space on top of a element
`nospace-bottom`	Remove space on bottom of a element

Space

Add space to a element. 30px are added on smaller screens and it expands to 60px on larger screens. A background is added in the example to better illustrate the space.

Class	Description
`space-top`	Add space on top of a element
`space-top-half`	Add space on top, but half of `space-top`
`space-bottom`	Add space on bottom of a element
`space-bottom-half`	Add half space on bottom of a element
`space-top-bottom`	Add space on top and bottom of a element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<div class="container space-top bg-light">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
</div>  