Koningkaart > Styleguide

styleguide

Kleuren

#c36b2c #292929 #f3ebe5 #fdfbfa #985821 #273459

Typografie

Headers

  • <h1>Header 1</h1>
  • <h2>Header 2</h2>
  • <h3>Header 3</h3>
  • <a href="#" target="_blank">Hyperlink</a>

Paragraphs

<p>Paragraph</p>

  1. font-family: 'Spartan',sans-serif;
  2. font-weight: 300
  3. font-size: 13px
  4. color: #292929

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Buttons

button default button primary button success
<a class="button button-default" href="#">button default</a>
<a class="button button-success" href="#">button success</a>
<a class="button button-primary" href="#">button primary</a>
            

2 Tekstkolommen

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

<div class="cols">
    <div class="xs-12 sm-6">
        <h3>H3 header</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>
    <div class="xs-12 sm-6">
        <h3>H3 header</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>
</div>
            

3 Tekstkolommen

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

<div class="cols">
    <div class="xs-12 sm-4">
        <h3>H3 header</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>
    <div class="xs-12 sm-4">
        <h3>H3 header</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>
    <div class="xs-12 sm-4">
        <h3>H3 header</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>
</div>
            

Afbeelding met tekst rechts

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

<div class="cols">
    <div class="xs-12 sm-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/foto_canvassen.jpg" />
            </span>
        </a>
    </div>

    <div class="xs-12 sm-6">
        <h3>H3 header</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>
</div>

Afbeelding met tekst links

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

<div class="cols">
    <div class="xs-12 sm-6">
        <h3>H3 header</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
            urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
            massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
            rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
            pretium.</p>
    </div>

    <div class="xs-12 sm-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/foto_canvassen.jpg" />
            </span>
        </a>
    </div>
</div>
            

3 Kolommen gelijke hoogte

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus.

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.

<div class="cols cols-eq-height">
    <div class="xs-12 sm-4 md-4 lg-4 mb-4">
        <div class="card">
            <a class="card-thumbnail" href="#">
                <img class="card-img" src="/media/foliedruk.jpg"/>
            </a>
            <div class="card-content">
                <h4>Header h4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean
                    iaculis auctor
                    urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a,
                    ultrices et
                    massa.</p>
            </div>
            <div class="card-button-group">
                <a class="button button-default" href="#">button</a>
            </div>
        </div>
    </div>
    <div class="xs-12 sm-4 md-4 lg-4 mb-4">
        <div class="card">
            <a class="card-thumbnail" href="#">
                <img class="card-img" src="/media/foliedruk.jpg"/>
            </a>
            <div class="card-content">
                <h4>Header h4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean
                    iaculis auctor
                    urna. Pellentesque cursus sem non tempor dapibus.
                </p>
            </div>
            <div class="card-button-group">
                <a class="button button-default" href="#">button</a>
            </div>
        </div>
    </div>
    <div class="xs-12 sm-4 md-4 lg-4 mb-4">
        <div class="card">
            <a class="card-thumbnail" href="#">
                <img class="card-img" src="/media/foliedruk.jpg"/>
            </a>
            <div class="card-content">
                <h4>Header h4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean
                    iaculis auctor
                    urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a,
                    ultrices et
                    massa.</p>
            </div>
            <div class="card-button-group">
                <a class="button button-default" href="#">button</a>
            </div>
        </div>
    </div>
</div>
            

1 Afbeelding

<div class="cols sm-cols-spacing">
    <div class="xs-12 xsm-12 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding1.jpg" />
            </span>
        </a>
    </div>
</div>

2 Afbeeldingen

<div class="cols sm-cols-spacing">
    <div class="xs-6 xsm-6 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding1.jpg" />
            </span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding1.jpg" />
            </span>
        </a>
    </div>
</div>

1 Afbeelding met label

<div class="cols sm-cols-spacing">
    <div class="xs-12 xsm-12 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding2.jpg" />
            </span>
            <span class="card-label">Label</span>
        </a>
    </div>
</div>

2 Afbeeldingen met label

<div class="cols sm-cols-spacing">
    <div class="xs-6 xsm-6 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding2.jpg" />
            </span>
            <span class="card-label">Label</span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding2.jpg" />
            </span>
            <span class="card-label">Label</span>
        </a>
    </div>
</div>

3 Afbeeldingen met label

<div class="cols sm-cols-spacing">
    <div class="xs-6 xsm-6 sm-6 md-4 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding2.jpg" />
            </span>
            <span class="card-label">Label</span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-4 mb-3">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding2.jpg" />
            </span>
            <span class="card-label">Label</span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-4 mb-4">
        <a class="card" href="#">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/afbeelding2.jpg" />
            </span>
            <span class="card-label">Label</span>
        </a>
    </div>
</div>

4 Afbeeldingen met label

    <div class="cols sm-cols-spacing">
        <div class="xs-6 xsm-6 sm-6 md-3 mb-3">
            <a class="card" href="#">
                <span class="card-thumbnail">
                    <img class="card-img" src="/media/afbeelding2.jpg" />
                </span>
                <span class="card-label">Label</span>
            </a>
        </div>
        <div class="xs-6 xsm-6 sm-6 md-3 mb-3">
            <a class="card" href="#">
                <span class="card-thumbnail">
                    <img class="card-img" src="/media/afbeelding2.jpg" />
                </span>
                <span class="card-label">Label</span>
            </a>
        </div>
        <div class="xs-6 xsm-6 sm-6 md-3 mb-4">
            <a class="card" href="#">
                <span class="card-thumbnail">
                    <img class="card-img" src="/media/afbeelding2.jpg" />
                </span>
                <span class="card-label">Label</span>
            </a>
        </div>
        <div class="xs-6 xsm-6 sm-6 md-3 mb-4">
            <a class="card" href="#">
                <span class="card-thumbnail">
                    <img class="card-img" src="/media/afbeelding2.jpg" />
                </span>
                <span class="card-label">Label</span>
            </a>
        </div>
    </div>

Gekleurde tekstblok

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.

<div class="card-content light-pink p-3">
<h4>Header h4</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.</p>
</div>

Gekleurde tekstblokken

  • Cupcake donut tart marzipan tart. Cheesecake topping halvah. Gingerbread cake toffee topping sugar plum jelly dessert.

    Marshmallow icing candy canes gingerbread cheesecake. Fruitcake lollipop jelly-o chocolate pudding. Pastry cotton candy halvah halvah.

  • Cotton candy danish marshmallow jujubes candy marshmallow cotton candy macaroon. Macaroon cake sweet jelly-o liquorice icing ice cream.

  • Wafer donut dessert biscuit tootsie roll tiramisu chupa chups. Jelly beans marshmallow bonbon cake toffee. Lemon drops icing tart marzipan gingerbread.

    Pudding candy canes chocolate bar tart gummies donut lollipop. Gummi bears tootsie

  • Gummi bears tootsie roll cupcake lemon drops.

  • Topping cupcake tart. Sugar plum topping cotton candy dragée croissant chocolate cake. Fruitcake lemon drops carrot cake jelly beans chupa chups. Jujubes tart brownie carrot cake lollipop chupa chups wafer cake.

  • Bonbon tiramisu jelly beans tiramisu sesame snaps.

  • Marzipan jelly beans danish cake fruitcake chocolate cake.

  • Pastry cotton candy halvah halvah.

  • Lemon drops biscuit oat cake. Tiramisu gummi bears sweet roll sweet roll gingerbread biscuit. Candy muffin brownie cake dragée sweet powder. Sesame snaps topping toffee liquorice chocolate cake.

  • Wafer donut dessert biscuit tootsie roll tiramisu chupa chups.
    Jelly beans marshmallow bonbon cake toffee.
    Lemon drops icing tart marzipan gingerbread.
    Pudding candy canes chocolate bar tart gummies donut lollipop.
    Gummi bears tootsie.

  • Sweet roll danish gingerbread.

  • Cotton candy danish marshmallow jujubes candy marshmallow cotton candy macaroon. Macaroon cake sweet jelly-o liquorice icing ice cream.

  • Marzipan jelly beans danish cake fruitcake chocolate cake.

  • Cake toffee pastry jelly jelly-o.

  • Bonbon tiramisu jelly beans tiramisu sesame snaps.

  • Cotton candy danish marshmallow jujubes candy marshmallow cotton candy macaroon. Macaroon cake sweet jelly-o liquorice icing ice cream.

  • Marzipan jelly beans danish cake fruitcake chocolate cake.

  • Cupcake donut tart marzipan tart. Cheesecake topping halvah. Gingerbread cake toffee topping sugar plum jelly dessert. Marshmallow icing candy canes gingerbread cheesecake. Fruitcake lollipop jelly-o chocolate pudding. Pastry cotton candy halvah halvah.

  • Marzipan jelly beans danish cake fruitcake chocolate cake.

  • Gummi bears tootsie roll cupcake lemon drops.

    <div class="container text-columns">
        <div class="row">
            <div class="column">
                <ul>
                    <li><p>Tekst</p>
                    <p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p>
                    <p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                </ul>
          </div>

            <div class="column">
                <ul>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst<br>
                    Tekst<br>
                    Tekst<br>
                    Tekst<br>
                    Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                </ul>
          </div>

            <div class="column">
                <ul>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst</p></li>
                    <li><p>Tekst<br>
                    Tekst<br>
                    Tekst<br>
                    Tekst<br>
                    Tekst</p></li>
                    <li><p>Tekst</p></li>
                </ul>
            </div>
        </div>
    </div>