styleguide

Colours

#7AC9D0 #643A7D #979797 #D1E4E9 #B2C9CF #099EBD

Typography

Header 1
Header 2
Header 3
Paragraph

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

Paragraphs

<p>Paragraph</p>

font-family: Raleway,sans-serif
font-size: 15px
tekst-color: #303030

Paragraph <p>

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

<div class="text-box__lichtblauw">
<p>Paragraph</p>
</div>

font-family: Raleway,sans-serif
font-size: 1em
tekst-color: #303030
tekst-backgroundcolor: #b2c9cf

Paragraph (backgroundcolor) <p>

<div class="text-box__blauw">
<p>Paragraph</p>
</div>

font-family: Raleway,sans-serif
font-size: 1em
tekst-color: #303030
tekst-backgroundcolor: #099EBD

Paragraph (backgroundcolor) <p>

Buttons

button button-primary button button-lg button-primary

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

Event blocks

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="event_blocks">
	<div class="cols cols-eq-height">
		<div class="xs-12 xsm-12 sm-4 md-4 lg-4">
			<div class="wrapper">
				<div class="img">
					<img class="img-responsive" src="/media/rouwkaart.jpg" />
				</div>
				<div class="content">
					<h3>H3 header</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
				</div>
			</div>
		</div>
		<div class="xs-12 xsm-12 sm-4 md-4 lg-4">
			<div class="wrapper">
				<div class="img">
					<img class="img-responsive" src="/media/rouwkaart.jpg" />
				</div>
				<div class="content">
					<h3>H3 header</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
				</div>
			</div>
		</div>
		<div class="xs-12 xsm-12 sm-4 md-4 lg-4">
			<div class="wrapper">
				<div class="img">
					<img class="img-responsive" src="/media/rouwkaart.jpg" />
				</div>
				<div class="content">
					<h3>H3 header</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
				</div>
			</div>
		</div>
	</div>
</div>

Info blocks

Header h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ex eget purus iaculis, in porttitor sem commodo. Integer malesuada est vitae eleifend consectetur. In pellentesque viverra libero, eget mattis ante tempor eu.

Lees meer

Header h3

Lees meer

Header h3

Lees meer

<div class="info_blocks">
    <div class="cols cols-eq-height">
        <div class="xs-12 xsm-12 sm-4 md-4 lg-4">
            <div class="wrapper">
                <div class="img"><img alt="" class="img-responsive" loading="lazy"
                                      src="/media/bedankt.jpg"/></div>

                <div class="content">
                    <h3>Header h3</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ex eget
                        purus iaculis, in porttitor sem commodo. Integer malesuada est vitae eleifend
                        consectetur. In pellentesque viverra libero, eget mattis ante tempor eu.</p>
                </div>
                <a class="button button-sm button-info" href="#">Lees meer</a></div>
        </div>

        <div class="xs-12 xsm-12 sm-4 md-4 lg-4">
            <div class="wrapper">
                <div class="img"><img class="img-responsive" loading="lazy" src="/media/bedankt.jpg"/>
                </div>

                <div class="content">
                    <h3>Header h3</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ex eget
                        purus iaculis, in porttitor sem commodo. Integer malesuada est vitae eleifend
                        consectetur. In pellentesque viverra libero, eget mattis ante tempor eu.</p>
                </div>
                <a class="button button-sm button-info" href="#">Lees meer</a></div>
        </div>

        <div class="xs-12 xsm-12 sm-4 md-4 lg-4">
            <div class="wrapper">
                <div class="img"><img alt="" class="img-responsive" loading="lazy"
                                      src="/media/bedankt.jpg"/></div>

                <div class="content">
                    <h3>Header h3</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ex eget
                        purus iaculis, in porttitor sem commodo. Integer malesuada est vitae eleifend
                        consectetur. In pellentesque viverra libero, eget mattis ante tempor eu.</p>
                </div>
                <a class="button button-sm button-info" href="#">Lees meer</a></div>
        </div>
    </div>
</div>

4 blocks

<div class="cols blocks_4">
	<div class="xs-6 md-3">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/rouwfoto.jpg" style="width: 193px; height: 139px;" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
	<div class="xs-6 md-3">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/rouwfoto.jpg" style="width: 193px; height: 139px;" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
	<div class="xs-6 md-3">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/rouwfoto.jpg" style="width: 193px; height: 139px;" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
	<div class="xs-6 md-3">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/rouwfoto.jpg" style="width: 193px; height: 139px;" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
</div>

3 blocks

<div class="cols blocks_4">
	<div class="xs-6 md-4">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/kind.jpg" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
	<div class="xs-6 md-4">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/kind.jpg" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
	<div class="xs-6 md-4">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/kind.jpg" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
</div>

2 blocks

<div class="cols blocks_4">
	<div class="xs-6 md-6">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/bidprentje.jpg" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
	<div class="xs-6 md-6">
		<a href="#" class="wrapper">
			<span class="image">
				<img class="img-responsive" src="/media/bidprentje.jpg" />
			</span>
			<span class="footer">label</span>
		</a>
	</div>
</div>

USP

GRATIS Proefdruk in april
Geen verzendkosten v.a. € 25
Voor 18.00 uur besteld, dezelfde dag verzonden

<ul class="usp_bar usp_bar d-flex between">
	<li>
		<a href="#">
			<strong>GRATIS Proefdruk in april</strong>
		</a>
	</li>
	<li><strong>Geen verzendkosten v.a. € 25</strong></li>
	<li><strong>Voor 18.00 uur besteld, dezelfde dag verzonden</strong></li>
</ul>

List type

title

HTML

<h4>title</h4>

</ul>

Text columns

This is gonna be a happy little seascape. Sometimes you learn more from your mistakes than you do from your masterpieces. Everyone needs a friend. Friends are the most valuable things in the world. Tree trunks grow however makes them happy. Even trees need a friend. We all need friends. Talent is a pursued interest. That is to say, anything you practice you can do.

It's almost like something out of a fairytale book. Everything is happy if you choose to make it that way. I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush. In your imagination you can go anywhere you want. Anytime you learn something your time and energy are not wasted. This is where you take out all your hostilities and frustrations. It's better than kicking the puppy dog around and all that so.

<div class="container">
   <div class="cols">
      <div class="xs-6">
         <p> Text </p>
      </div>
      <div class="xs-6">
         <p> Text </p>
      </div>
   </div>
</div>

Text columns equal height

It's almost like something out of a fairytale book. Everything is happy if you choose to make it that way.

Maybe there's a happy little bush that lives right there. Clouds are free. They just float around the sky all day and have fun.

<div class="container">
   <div class="cols cols-stretch-vertical">
      <div class="xs-6">
         <div class="box stretch-vertical-height"> Text </div>
      </div>
      <div class="xs-6">
         <div class="box stretch-vertical-height"> Text </div>
      </div>
   </div>
</div>

Text box met image

Title

Maybe there's a happy little bush that lives right there. Clouds are free.

  <div class="text-box margin-t-20 container">
    <div class="cols cols-stretch-vertical">
      <div class="xs-12 sm-6">
        <div class="text-box__content stretch-vertical-height bg-pink">
          <h1 class="title-lg">Title</h1>
          <p>Maybe there's a happy little bush that lives right there. Clouds are free.</p>
        </div>
      </div>
      <div class="xs-hide sm-6">
        <div class="text-box__img stretch-vertical-height">
          <img class="img-responsive" src="/media/rouwkaart.jpg">
        </div>
      </div>
    </div>
  </div>

styleguide

Colours

Typography

Header 1

Header 2

Header 3

Paragraphs

Paragraph <p>

Paragraph (backgroundcolor) <p>

Paragraph (backgroundcolor) <p>

Buttons

Event blocks

H3 header

H3 header

H3 header

Info blocks

Header h3

Header h3

Header h3

4 blocks

3 blocks

2 blocks

USP

List type

title

HTML

Text columns

Text columns equal height

Text box met image

Title

★★★★☆ Beoordelingen

MyCards Rouwdrukwerk

Rouwdrukwerk

Help

Contact

Overige

styleguide

Colours

Typography

Header 1

Header 2

Header 3

Paragraphs

Paragraph <p>

Paragraph (backgroundcolor) <p>

Paragraph (backgroundcolor) <p>

Buttons

Event blocks

H3 header

H3 header

H3 header

Info blocks

Header h3

Header h3

Header h3

4 blocks

3 blocks

2 blocks

USP

List type

title

HTML

Text columns

Text columns equal height

Text box met image

Title

★★★★☆ Beoordelingen

MyCards Rouwdrukwerk

Rouwdrukwerk

Help

Contact

Overige

Toegevoegd aan je collectie

Verwijderd uit eigen collectie