nl flag
logo

Typografie

Standaard lettertype instellingen van CCS Little

Onderdeel Waarde
font-family Verdana,sans-serif
font-size 15px
line-height 1.5

Headers

H1

<h1></h1>

H2

<h2></h2>

H3

<h3></h3>

H4

<h4></h4>
H5
<h5></h5>
H6
<h6></h6>

Headers + small

H1 + small

<h1><small></small></h1>

H2 + small

<h2><small></small></h2>

H3 + small

<h3><small></small></h3>

H4 + small

<h4><small></small></h4>
H5 + small
<h5><small></small></h5>
H6 + small
<h6><small></small></h6>

Paragraaf

<p></p>

Citaat

Voetbal is een simpel spelletje. Ofwel kom je op tijd bij de bal, ofwel ben je te laat. Als je vaak te laat komt, moet je de volgende keer gewoon wat vroeger vertrekken.

Johan Cruijf
<blockquote>
<p></p>
<footer></footer>
</blockquote>

pre

<div style="text-align: center;">
  <h1>H1 LORUM <small>Small</small></h1>
  <h2>H2 LORUM <small>Small</small></h2>
  <h3>H3 LORUM <small>Small</small></h3>
  <h4>H4 LORUM <small>Small</small></h4>
  <h5>H5 LORUM <small>Small</small></h5>
  <h6>H6 LORUM <small>Small</small></h6>
</div>
<pre></pre>

abbr

CSS Little is een klein framework

Koffie
Een hete drank
Melk
Een koude drank
<dl>
<dt></dt>
<dd></dd>
</dl>

code

<h6>H6 LORUM <small>Small</small></h6>

<code></code>

kbd

index.html

<kbd></kbd>

Pre

Attentie

<mark></mark>

Linken

link-black
<a class="link-black"></a>
link-green
<a class="link-green"></a>
link-yellow
<a class="link-yellow"></a>
link-blue
<a class="link-blue"></a>
link-red
<a class="link-red"></a>
link-gray
<a class="link-gray"></a>
link-white
<a class="link-white"></a>

Responsive teksten

title-lg
<div class="title-lg"></div>
title-md
<div class="title-md"></div>
title-sm
<div class="title-sm"></div>

Tekst aanpassingen

upper

<p class="upper"></p>

wide

<p class="wide"></p>

lower

<p class="lower"></p>

text-shadow-b

<p class="text-shadow-b"></p>

capitalize

<p class="capitalize"></p>

text-shadow-w

<p class="text-shadow-w"></p>

Aanpassen tekstgrootte

small

<p class="small"></p>

medium

<p class="medium"></p>

large

<p class="large"></p>

xlarge

<p class="xlarge"></p>

jumbo

<p class="jumbo"></p>

xxlarge

<p class="xxlarge"></p>

xxxlarge

<p class="xxxlarge"></p>