Huisvanmijn > Styleguide

styleguide

Kleuren

#A67151 #ECDAC6 #D0AE98 #D79084 #E8E4DE #FFFFFF

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: Verdana, Geneva, Sans-Serif
  2. font-size: 16px
  3. color: #211f1c

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 pink-darker
<a class="hvm-button pink-darker" href="#">Button pink-darker</a>
            

Tekstblok met button

  1. font-family: 'PT Sans', sans-serif
  2. font-size: 14px
  3. color: #211f1c

Paragraaf 1: paragraaf zichtbaar op desktop. Verborgen op mobiel en tablet.

Paragraaf 2: paragraaf zichtbaar op desktop. Verborgen op mobiel en tablet.

Paragraaf 3: paragraaf zichtbaar op desktop. Verborgen op mobiel en tablet.

Button pink-darker

Deze paragraaf is zichtbaar op mobiel en tablet en onzichtbaar op desktop.

<div class="container visual">
    <div class="cols">
        <div class="homepage-text xs-hide xsm-hide sm-hide md-12 lg-12 text-center">
            <p>Paragraaf 1: paragraaf zichtbaar op desktop. Verborgen op mobiel en tablet.</p>
            <p>Paragraaf 2: paragraaf zichtbaar op desktop. Verborgen op mobiel en tablet.</p>
            <p>Paragraaf 3: paragraaf zichtbaar op desktop. Verborgen op mobiel en tablet.</p>
            <a class="hvm-button pink-darker" href="#">Button pink-darker</a>
        </div>
        <div class="xs-12 xsm-12 sm-12 md-hide lg-hide">
            <p>Deze paragraaf is zichtbaar op mobiel en tablet en onzichtbaar op desktop.</p>
        </div>
    </div>
</div>
            

Afbeelding beeldvullend met button

<div class="trouwstijlen">
    <div class="position-relative">
        <a href="#">
            <img alt="" class="img-responsive" src="/media/imgfoliekaarten6.jpg"/>
        </a>
        <a class="hvm-button pink-darker" href="#">Button pink-darker</a>
    </div>
</div>
            

Afbeelding links

<div class="cols">
    <div class="xs-12 sm-6">
        <a href="#"><img alt="" class="img-responsive" src="/media/imgtweelingkaarten44.jpg"/></a>
    </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 visual-block">
    <div class="xs-12 sm-6">
        <a href="#"><img alt="" class="img-responsive" src="/media/imgwenskaarten.jpg"/></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 visual-block">
    <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">
        <a href=""><img alt="" class="img-responsive" src="/media/imgwenskaarten.jpg"/></a>
    </div>
</div>
            

2 Afbeeldingen

<div class="cols visual-block">
    <div class="xs-6">
        <a href="#"><img class="img-responsive" src="/media/imgwenskaarten.jpg"/></a>
    </div>
    <div class="xs-6">
        <a href="#"><img class="img-responsive" src="/media/imgwenskaarten.jpg"/></a>
    </div>
</div>
            

3 Afbeeldingen met button

<div class="cols visual-block">
    <div class="xs-12 sm-4 margin-b-20">
        <a href="#"><img alt="" class="img-responsive" src="/media/imgtweelingkaarten44.jpg"/></a>
        <a class="hvm-button pink-darker" href="#">Button pink-darker</a>
    </div>
    <div class="xs-12 sm-4 margin-b-20">
        <a href="#"><img alt="" class="img-responsive" src="/media/imgtweelingkaarten44.jpg"/></a>
        <a class="hvm-button pink-darker" href="#">Button pink-darker</a>
    </div>
    <div class="xs-12 sm-4 margin-b-20">
        <a href="#"><img alt="" class="img-responsive" src="/media/imgtweelingkaarten44.jpg"/></a>
        <a class="hvm-button pink-darker" href="#">Button pink-darker</a>
    </div>
</div>
            

4 Afbeeldingen

<div class="cols cols-multi">
    <div class="xs-6 md-3">
        <a href="#" target="_self">
            <img class="img-responsive" src="/media/imgtrouwkaarten11.jpg" style="width: 200px; height: 200px;"/>
        </a>
    </div>

    <div class="xs-6 md-3">
        <a href="#" target="_self">
            <img class="img-responsive" src="/media/imgtrouwkaarten11.jpg" style="width: 200px; height: 200px;"/>
        </a>
    </div>

    <div class="xs-6 md-3">
        <a href="#" target="_self">
            <img class="img-responsive" src="/media/imgtrouwkaarten11.jpg" style="width: 200px; height: 200px;"/>
        </a>
    </div>

    <div class="xs-6 md-3">
        <a href="#" target="_self">
            <img class="img-responsive" src="/media/imgtrouwkaarten11.jpg" style="width: 200px; height: 200px;"/>
        </a>
    </div>
</div>
            

4 Afbeeldingen met tekstblok

H3 header

Tekstblok met een link.

H3 header

Tekstblok met een link.

H3 header

Tekstblok met een link.

H3 header

Tekstblok met een link.

<div class="cols cols-multi">
    <div class="xs-6 xsm-6 sm-6 md-3 lg-3 margin-b-20">
        <div class="block">
            <div class="block-img">
                <a href="#" target="_self">
                    <img alt="" class="img-responsive" src="/media/imghoutenelementjes.jpg"
                                                                style="width: 200px; height: 200px;"/>
                </a>
            </div>
            <div class="block-text">
                <h3>H3 header</h3>
                <p>Tekstblok met een <a href="#">link.</a></p>
            </div>
        </div>
    </div>

    <div class="xs-6 xsm-6 sm-6 md-3 lg-3 margin-b-20">
        <div class="block">
            <div class="block-img">
                <a href="#" target="_self">
                    <img alt="" class="img-responsive" src="/media/imghoutenelementjes.jpg"
                                                                style="width: 200px; height: 200px;"/>
                </a>
            </div>
            <div class="block-text">
                <h3>H3 header</h3>
                <p>Tekstblok met een <a href="#">link.</a></p>
            </div>
        </div>
    </div>

    <div class="xs-6 xsm-6 sm-6 md-3 lg-3 margin-b-20">
        <div class="block">
            <div class="block-img">
                <a href="#" target="_self">
                    <img alt="" class="img-responsive" src="/media/imghoutenelementjes.jpg"
                                                                style="width: 200px; height: 200px;"/>
                </a>
            </div>
            <div class="block-text">
                <h3>H3 header</h3>
                <p>Tekstblok met een <a href="#">link.</a></p>
            </div>
        </div>
    </div>

    <div class="xs-6 xsm-6 sm-6 md-3 lg-3 margin-b-20">
        <div class="block">
            <div class="block-img">
                <a href="#" target="_self">
                    <img alt="" class="img-responsive" src="/media/imghoutenelementjes.jpg"
                                                                style="width: 200px; height: 200px;"/>
                </a>
            </div>
            <div class="block-text">
                <h3>H3 header</h3>
                <p>Tekstblok met een <a href="#">link.</a></p>
            </div>
        </div>
    </div>
</div>
            

Social media items

<div class="cols socialmedia-circles">
    <div class="xs-12">
        <a class="facebook-circle" href="#" target="_blank"><span>Facebook</span></a>
        <a class="pinterest-circle" href="#" target="_blank"><span>Pinterest</span></a>
        <a class="instagram-circle" href="#" target="_blank"><span>Instagram</span></a>
    </div>
</div>