styleguide

Kleuren

#262626 #D1C9C1 #F9F4EF #C69161

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: 'Montserrat',sans-serif;
  2. font-weight: 400
  3. font-size: 14px
  4. color: #000000

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">
        <a class="card" href="#"><img alt="" class="card-img" src="/media/Afbeelding-15.png"/></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">
        <a class="card" href="#"><img class="card-img" src="/media/Afbeelding-15.png"/></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">
            <img class="card-img" src="/media/Afbeelding-15.png"/>

            <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">
            <img class="card-img" src="/media/Afbeelding-15.png"/>

            <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">
            <img class="card-img" src="/media/Afbeelding-15.png"/>

            <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>
            

Afbeelding met tekst en button rechts

We zijn er ookvoor de uitvaartondernemer

Op Salut vind je rouwdrukwerk in verschillende stijlen, soorten en maten. Elke kaart, brief of andere vorm van drukwerk is aanpasbaar. Zo kun je tastbare herinneringen maken die passen bij een persoonlijk afscheid. Bent u als uitvaartondernemer ook geïnteresseerd in rouwkaarten van Salut? Neem dan contact met ons op.

<div class="cols cols-eq-height">
    <div class="display-none display-md-block md-6 lg-6">
        <div class="card">
            <img class="card-img" src="/media/Afbeelding-2.png"/>
        </div>
    </div>
    <div class="xs-12 sm-12 md-6 lg-6">
        <div class="content">
            <h2>We zijn er ook<span class="font-weight-400 display-block">voor de uitvaartondernemer</span></h2>
            <p>Op Salut vind je rouwdrukwerk in verschillende stijlen, soorten en maten. Elke kaart, brief of
                andere
                vorm van drukwerk is aanpasbaar. Zo kun je tastbare herinneringen maken die passen bij een
                persoonlijk afscheid.
                Bent u als uitvaartondernemer ook geïnteresseerd in rouwkaarten van Salut? Neem dan contact met
                ons
                op.</p>
            <div class="button-group">
                <a class="button button-default button-arrow" href="#">Button</a>
            </div>
        </div>
    </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="#">
            <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
            <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="#">
            <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
            <span class="card-label">Label</span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-6 mb-3">
        <a class="card" href="#">
            <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
            <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="#">
            <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
            <span class="card-label small">Label</span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-4 mb-3">
        <a class="card" href="#">
            <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
            <span class="card-label small">Label</span>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-4 mb-4">
        <a class="card" href="#">
            <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
            <span class="card-label small">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="#">
                <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
                <span class="card-label small">Label</span>
            </a>
        </div>
        <div class="xs-6 xsm-6 sm-6 md-3 mb-3">
            <a class="card" href="#">
                <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
                <span class="card-label small">Label</span>
            </a>
        </div>
        <div class="xs-6 xsm-6 sm-6 md-3 mb-4">
            <a class="card" href="#">
                <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
                <span class="card-label small">Label</span>
            </a>
        </div>
        <div class="xs-6 xsm-6 sm-6 md-3 mb-4">
            <a class="card" href="#">
                <img class="card-img" src="/media/HB4-rouwdrukwerk-rouwkaarten.jpg" />
                <span class="card-label small">Label</span>
            </a>
        </div>
    </div>

Gekleurde tekstblokken

Tot ons onbeschrijflijk verdriet is van ons weggenomen

Voornaam Achternaam

Met veel verdriet geven wij kennis van het overlijden van onze lieve dochter, zus en tante

Voornaam Achternaam

Wij hebben afscheid moeten nemen van onze lieve man, vader en broer

Voornaam Achternaam

Vol dankbaarheid voor alle goede zorgen en liefde die wij van haar mochten ontvangen,
maar bedroefd om haar heengaan delen wij u mede dat

Voornaam Achternaam

in de nacht van [datum] is overleden.

<div class="cols cols-eq-height">
    <div class="xs-12 sm-12 md-6 lg-6 mt-4">
        <div class="bg-orange h-100 p-3">
            <p>Tot ons onbeschrijflijk verdriet is van ons weggenomen</p>

            <p class="font-weight-600">Voornaam Achternaam</p>
        </div>
    </div>
    <div class="xs-12 sm-12 md-6 lg-6 mt-4">
        <div class="bg-orange h-100 p-3">
            <p>Met veel verdriet geven wij kennis van het overlijden van onze lieve dochter, zus en tante</p>

            <p class="font-weight-600">Voornaam Achternaam</p>
        </div>
    </div>
</div>
<div class="cols cols-eq-height">
    <div class="xs-12 sm-12 md-6 lg-6 mt-4 mb-0 mb-md-5">
        <div class="bg-orange h-100 p-3">
            <p>Wij hebben afscheid moeten nemen van onze lieve man, vader en broer</p>

            <p class="font-weight-600">Voornaam Achternaam</p>
        </div>
    </div>
    <div class="xs-12 sm-12 md-6 lg-6 mt-4 mb-5">
        <div class="bg-orange h-100 p-3">
            <p>Vol dankbaarheid voor alle goede zorgen en liefde die wij van haar mochten ontvangen,<br/>
                maar bedroefd om haar heengaan delen wij u mede dat</p>

            <p class="font-weight-600">Voornaam Achternaam</p>

            <p>in de nacht van [datum] is overleden.</p>
        </div>
    </div>
</div>