Salut > Styleguide

styleguide

Kleuren

#2e3842 #bdccd4 #dec190 #cdad7f #c38d5d var(--gradient)

* CSS: Gebruikt background in plaats van color: background: var(--gradient); ipv color: var(--gradient);

Typografie

Headers

  • H1. Rouwkaarten maak je bij Salut

  • H2. Rouwkaarten maak je bij Salut

  • H3. Rouwkaarten maak je bij Salut

  • Hyperlink
  • <h1>Rouwkaarten maak je bij Salut</h1>
  • <h2>Rouwkaarten maak je bij Salut</h2>
  • <h3>Rouwkaarten maak je bij Salut</h3>
  • <a href="#" target="_blank">Hyperlink</a>

Paragraphs

<p>Paragraph</p>

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

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 success Button default
<a class="button button-success" href="#">Button success</a>
<a class="button button-default" href="#">Button default</a>

Banner

<div class="flex-row">
	<div class="flex-column" style="padding:15px 0;"><img class="img-responsive" height="605" img="" loading="lazy" src="/media/homebannernew.jpg" width="1500" />
   </div>
</div>
            

Usp balk lichtblauw

'Geweldige service en super snelle levering' Hoera, 99% van onze klanten beveelt Salut aan!

<div class="text-box bg-light-blue">
     <p><strong>&#39;Geweldige service en super snelle levering&#39;</strong> Hoera, 99% van onze klanten beveelt Salut aan!</p>
</div>

Usp balk lichtblauw 50%

'Geweldige service en super snelle levering' Hoera, 99% van onze klanten beveelt Salut aan!

<div class="text-box bg-light-blue-50">
     <p><strong>&#39;Geweldige service en super snelle levering&#39;</strong> Hoera, 99% van onze klanten beveelt Salut aan!</p>
</div>

Usp balk oker

'Geweldige service en super snelle levering' Hoera, 99% van onze klanten beveelt Salut aan!

<div class="text-box bg-oker">
     <p><strong>&#39;Geweldige service en super snelle levering&#39;</strong> Hoera, 99% van onze klanten beveelt Salut aan!</p>
</div>

Usp balk oker 50%

'Geweldige service en super snelle levering' Hoera, 99% van onze klanten beveelt Salut aan!

<div class="text-box bg-oker-50">
     <p><strong>&#39;Geweldige service en super snelle levering&#39;</strong> Hoera, 99% van onze klanten beveelt Salut aan!</p>
</div>

Widget lichtblauw

Daarom kies je
Salut

  • GRATIS hulp en advies
  • Scherp geprijsd
  • Snelle levering
  • Verzendservice
  • Klantwaardering 9.4
<div class="text-box bg-light-blue">
    <h2 class="title-usp-widget">Daarom kies je<br>
    <span class="title-usp-widget">Salut</span></h2>
    <ul class="usp-check">
        <li>GRATIS hulp en advies</li>
        <li>Scherp geprijsd</li>
        <li>Snelle levering</li>
        <li>Verzendservice</li>
        <li>Klantwaardering 9.4</li>
    </ul>
</div>

Widget lichtblauw 50%

Daarom kies je
Salut

  • GRATIS hulp en advies
  • Scherp geprijsd
  • Snelle levering
  • Verzendservice
  • Klantwaardering 9.4
<div class="text-box bg-light-blue-50">
    <h2 class="title-usp-widget">Daarom kies je<br>
    <span class="title-usp-widget">Salut</span></h2>
    <ul class="usp-check">
        <li>GRATIS hulp en advies</li>
        <li>Scherp geprijsd</li>
        <li>Snelle levering</li>
        <li>Verzendservice</li>
        <li>Klantwaardering 9.4</li>
    </ul>
</div>

Widget oker

Daarom kies je
Salut

  • GRATIS hulp en advies
  • Scherp geprijsd
  • Snelle levering
  • Verzendservice
  • Klantwaardering 9.4
<div class="text-box bg_oker">
    <h2 class="title-usp-widget">Daarom kies je<br>
    <span class="title-usp-widget">Salut</span></h2>
    <ul class="usp-check">
        <li>GRATIS hulp en advies</li>
        <li>Scherp geprijsd</li>
        <li>Snelle levering</li>
        <li>Verzendservice</li>
        <li>Klantwaardering 9.4</li>
    </ul>
</div>

Widget oker 50%

Daarom kies je
Salut

  • GRATIS hulp en advies
  • Scherp geprijsd
  • Snelle levering
  • Verzendservice
  • Klantwaardering 9.4
<div class="text-box bg-oker-50">
    <h2 class="title-usp-widget">Daarom kies je<br>
    <span class="title-usp-widget">Salut</span></h2>
    <ul class="usp-check">
        <li>GRATIS hulp en advies</li>
        <li>Scherp geprijsd</li>
        <li>Snelle levering</li>
        <li>Verzendservice</li>
        <li>Klantwaardering 9.4</li>
    </ul>
</div>

Salut uitklapblok lichtblauw

<div class="faq-box"><button class="accordion-faq bg-light-blue">Onze bijzondere collecties:</button>
<div class="panel bg-light-blue-50">
<ul>
	<li><a href="#">Foliedruk </a></li>
	<li><a href="#">Echt hout</a></li>
	<li><a href="#">Ronde hoeken</a></li>
	<li><a href="#">Duurzaampapier</a></li>
	<li><a href="#">Pocketfold</a></li>
	<li><a href="#">Echt kraft papier</a></li>
</ul>
</div>
<button class="accordion-faq bg-light-blue">Bekijk onze rouwkaarten:</button>

<div class="panel bg-light-blue-50">
<ul>
	<li><a href="#">Kindje</a></li>
	<li><a href="#">Man</a></li>
	<li><a href="#">Vrouw</a></li>
</ul>
</div>
</div>

Salut uitklapblok lichtblauw 50%

<div class="faq-box"><button class="accordion-faq bg-light-blue-50">Onze bijzondere collecties:</button>
<div class="panel">
<ul>
	<li><a href="#">Foliedruk </a></li>
	<li><a href="#">Echt hout</a></li>
	<li><a href="#">Ronde hoeken</a></li>
	<li><a href="#">Duurzaampapier</a></li>
	<li><a href="#">Pocketfold</a></li>
	<li><a href="#">Echt kraft papier</a></li>
</ul>
</div>
<button class="accordion-faq bg-light-blue-50">Bekijk onze rouwkaarten:</button>

<div class="panel">
<ul>
	<li><a href="#">Kindje</a></li>
	<li><a href="#">Man</a></li>
	<li><a href="#">Vrouw</a></li>
</ul>
</div>
</div>

Salut uitklapblok oker

<div class="faq-box"><button class="accordion-faq bg-oker">Onze bijzondere collecties:</button>
<div class="panel bg-oker-50">
<ul>
	<li><a href="#">Foliedruk </a></li>
	<li><a href="#">Echt hout</a></li>
	<li><a href="#">Ronde hoeken</a></li>
	<li><a href="#">Duurzaampapier</a></li>
	<li><a href="#">Pocketfold</a></li>
	<li><a href="#">Echt kraft papier</a></li>
</ul>
</div>
<button class="accordion-faq bg-oker">Bekijk onze rouwkaarten:</button>

<div class="panel bg-oker-50">
<ul>
	<li><a href="#">Kindje</a></li>
	<li><a href="#">Man</a></li>
	<li><a href="#">Vrouw</a></li>
</ul>
</div>
</div>

Salut uitklapblok oker 50%

<div class="faq-box"><button class="accordion-faq bg-oker-50">Onze bijzondere collecties:</button>
<div class="panel">
<ul>
	<li><a href="#">Foliedruk </a></li>
	<li><a href="#">Echt hout</a></li>
	<li><a href="#">Ronde hoeken</a></li>
	<li><a href="#">Duurzaampapier</a></li>
	<li><a href="#">Pocketfold</a></li>
	<li><a href="#">Echt kraft papier</a></li>
</ul>
</div>
<button class="accordion-faq bg-oker-50">Bekijk onze rouwkaarten:</button>

<div class="panel">
<ul>
	<li><a href="#">Kindje</a></li>
	<li><a href="#">Man</a></li>
	<li><a href="#">Vrouw</a></li>
</ul>
</div>
</div>

Usp-box-right lichtblauw

Maak een uniek
Rouwkaart

Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.

naar alle rouwkaarten
rouwkaarten
<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__right bg-light-blue">
<h2 class="title-lg">Maak een uniek<br />
<span class="title-lg">Rouwkaart</span></h2>

<p>Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.</p>
<a class="button button-lg-box" href="/rouwkaarten">naar alle rouwkaarten</a></div>

<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>
</div>

Usp-box-left lichtblauw

rouwkaarten

Heel bijzonder, wat een goede
service!

Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!

<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>

<div class="usp-box__right bg-light-blue-">
<h2 class="title-lg">Heel bijzonder, wat een goede<br />
<span class="titlelg">service!</span></h2>

<p>Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!</p>
</div>
</div>

Usp-box-right lichtblauw 50%

Maak een uniek
Rouwkaart

Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.

naar alle rouwkaarten
rouwkaarten
<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__right bg-light-blue-50">
<h2 class="title-lg">Maak een uniek<br />
<span class="title-lg">Rouwkaart</span></h2>

<p>Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.</p>
<a class="button button-lg-box" href="/rouwkaarten">naar alle rouwkaarten</a></div>

<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>
</div>

Usp-box-left lichtblauw 50%

rouwkaarten

Heel bijzonder, wat een goede
service!

Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!

<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>

<div class="usp-box__right bg-light-blue-50">
<h2 class="title-lg">Heel bijzonder, wat een goede<br />
<span class="titlelg">service!</span></h2>

<p>Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!</p>
</div>
</div>

Usp-box-right oker

Maak een uniek
Rouwkaart

Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.

naar alle rouwkaarten
rouwkaarten
<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__right bg-oker">
<h2 class="title-lg">Maak een uniek<br />
<span class="title-lg">Rouwkaart</span></h2>

<p>Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.</p>
<a class="button button-lg-box" href="/rouwkaarten">naar alle rouwkaarten</a></div>

<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>
</div>

Usp-box-left oker

rouwkaarten

Heel bijzonder, wat een goede
service!

Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!

<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>

<div class="usp-box__right bg-oker">
<h2 class="title-lg">Heel bijzonder, wat een goede<br />
<span class="titlelg">service!</span></h2>

<p>Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!</p>
</div>
</div>

Usp-box-right oker 50%

Maak een uniek
Rouwkaart

Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.

naar alle rouwkaarten
rouwkaarten
<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__right bg-oker-50">
<h2 class="title-lg">Maak een uniek<br />
<span class="title-lg">Rouwkaart</span></h2>

<p>Alle ontwerpen zijn aan te passen, met meer dan 1000 afbeeldingen om je rouwkaart te bewerken.</p>
<a class="button button-lg-box" href="/rouwkaarten">naar alle rouwkaarten</a></div>

<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>
</div>

Usp-box-left oker 50%

rouwkaarten

Heel bijzonder, wat een goede
service!

Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!

<div class="flex-container usp-box" style="padding:15px 0;">
<div class="usp-box__left"><img alt="rouwkaarten" class="img-responsive" loading="lazy" src="/media/natuur.jpg" /></div>

<div class="usp-box__right bg-oker-50">
<h2 class="title-lg">Heel bijzonder, wat een goede<br />
<span class="titlelg">service!</span></h2>

<p>Hier werken mensen die echt met je meedenken en je helpen om het kaartje perfect te maken!</p>
</div>
</div>

Blokken; indeling blijft gelijk bij mobiele weergave

 

Blok met tekst: ook voor mobiele weergave goed

Rouwkaarten

Titel naast een blok

Dit is een tekstvak met alinea tekst naast een afbeelding. De afbeelding zit aan de linkerkant op desktop en bij mobiele weergave boven de tekst en titel. Ik ben nu even aan het testen of de uitlijning van deze alinea van onder naar boven gaat. Daarom typ ik hier een beetje veel onzin tekst......Even later: ik heb het uitgetest en het klopt inderdaad wat ik al dacht. De uitlijning van dit blok gaat van onder naar boven. Houdt hier dus rekening mee met de opmaak.

Blok met kader

Titel | geen H
En een mooie subtitel

Waar kunnen we eens iets moois over vertellen? Nou over een heleboel leuke dingen natuurlijk! Want er is zoveel moois op aarde wat nog beschreven moet worden maar daar is dit plekje niet groot genoeg voor

 

Afbeeldingen

Hieronder staan afbeeldingen, dit zijn geen dynamische kaarten.

 

Indeling voor dynamische tekstvlakken, b.v. voor gedichten

 

Hoi mooi gedicht

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum lacinia ante et pretium. Nullam placerat tortor dui, in suscipit nibh posuere vitae.

Nog mooier gedichtje zeg

Nunc ex nulla, porta ut dapibus id, efficitur a leo. Integer eget magna arcu. Nunc sed eros eget neque ullamcorper iaculis non id nibh.

En wat dacht je van deze?

Suspendisse dignissim in velit sit amet iaculis. Sed sed velit mauris. Vivamus accumsan imperdiet nunc, a molestie risus aliquam eu. Nulla facilisi.Suspendisse dignissim in velit sit amet iaculis. Sed sed velit mauris.

Hoi mooi gedicht

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum lacinia ante et pretium. Nullam placerat tortor dui, in suscipit nibh posuere vitae.

Nog mooier gedichtje zeg

Nunc ex nulla, porta ut dapibus id, efficitur a leo. Integer eget magna arcu. Nunc sed eros eget neque ullamcorper iaculis non id nibh.

En wat dacht je van deze?

Suspendisse dignissim in velit sit amet iaculis. Sed sed velit mauris. Vivamus accumsan imperdiet nunc, a molestie risus aliquam eu. Nulla facilisi.

Hoi mooi gedicht

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum lacinia ante et pretium. Nullam placerat tortor dui, in suscipit nibh posuere vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum lacinia ante et pretium. Nullam placerat tortor dui, in suscipit nibh posuere vitae.

Nog mooier gedichtje zeg

Nunc ex nulla, porta ut dapibus id, efficitur a leo. Integer eget magna arcu. Nunc sed eros eget neque ullamcorper iaculis non id nibh.

En wat dacht je van deze?

Suspendisse dignissim in velit sit amet iaculis. Sed sed velit mauris. Vivamus accumsan imperdiet nunc, a molestie risus aliquam eu. Nulla facilisi.

Blok met tekst en opsomming en button

Rouwkaarten
  • Beeld en tekst zelf aan te passen
  • 7 papiersoorten, 14 kleuren enveloppen
  • Voor 18:00 besteld, morgen in huis
  • Op zondag voor 15:00 besteld, maandag in huis
Bekijk alle rouwkaarten
Andre
Vragen? Bel ons op: 085 - 743 07 65
Bereikbaar op werkdagen van 9:00 - 18:00

 

Personaliseer de kaart met een foto
Rouwkaarten
Schrijf een eigen tekst
  • Beeld en tekst zelf aan te passen
  • 7 papiersoorten, 14 kleuren enveloppen
  • Voor 18:00 besteld, morgen in huis
  • Op zondag voor 15:00 besteld, maandag in huis
Bekijk alle rouwkaarten
Andre
Vragen? Bel ons op: 085 - 743 07 65
Bereikbaar op werkdagen van 9:00 - 18:00

Tabel; wordt niet getoond bij mobiele weergave

Hier allemaal content-blokken: niet mooi op mobiele weergave

Een titel hier

Nunc facilisis volutpat neque, id sagittis ex sollicitudin suscipit. Etiam non consequat magna, ut bibendum ante. Phasellus nulla dui, vestibulum vel velit id, viverra congue lacus. Pellentesque aliquet lorem sed dui ornare maximus. Proin et sodales sapien, ut varius urna. Sed mattis orci quis leo vulputate, at feugiat erat mattis.

Een titel hier

Nunc facilisis volutpat neque, id sagittis ex sollicitudin suscipit. Etiam non consequat magna, ut bibendum ante. Phasellus nulla dui, vestibulum vel velit id, viverra congue lacus. Pellentesque aliquet lorem sed dui ornare maximus. Proin et sodales sapien, ut varius urna. Sed mattis orci quis leo vulputate, at feugiat erat mattis.

Een titel hier

Nunc facilisis volutpat neque, id sagittis ex sollicitudin suscipit. Etiam non consequat magna, ut bibendum ante. Phasellus nulla dui, vestibulum vel velit id, viverra congue lacus. Pellentesque aliquet lorem sed dui ornare maximus.

Mooie knop

ABC indeling

Op deze pagina vind je ons complete aanbod trouwkaarten. Opzoek naar een specifieke stijl of ontwerp? Neem contact met ons op, wij helpen je graag!