Styleguide Villa Pluis
Villa Pluis > Styleguide Villa Pluis

styleguide

Kleuren

#a5b5aa #d9e3db #dfb3b0 #dfb4b2 #f2efea

Typografie

Headers

  • Header 1

  • Header 1

  • Header 2

  • Header 2

  • Header 3

  • Header 3

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

Paragraphs

<p>Paragraph</p>

  1. font-family: 'Gravity',sans-serif;
  2. font-weight: normal
  3. font-size: 14px
  4. color: #303030

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

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.

<div class="cols">
    <div class="xs-12 sm-6">
        <a href="#"><img alt="" class="img-responsive" src="/media/geboortekaartjejamesmetkalkpapier.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.</p>
        <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. </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.

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.

<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.</p>
        <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. </p>
    </div>
    <div class="xs-12 sm-6">
        <a href="#"><img class="img-responsive" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/></a>
    </div>
</div>
            

1 Afbeelding met button (a)

<div class="cols">
   <div class="xs-12 xsm-12 sm-6 md-6 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592"
         loading="lazy"
         src="/media/geboortekaartjejamesmetkalkpapier.jpg"
         width="700"/>
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
</div>

1 Afbeelding met button (b)

<div class="cols">
<div class="display-none display-sm-block sm-6">
    <a class="card" href="/">
        <img alt="" class="card-img" height="300" loading="lazy" src="/media/geboortekaartjenorimetfoliedruk1.jpg" width="500" />
        <span class="card-category-btn button">BUTTON</span>
    </a>
</div>


<div class="xs-6 xsm-6 display-sm-none">
    <a class="card" href="/">
        <img alt="" class="card-img" height="300" loading="lazy" src="/media/geboorte-folie-mobiel.jpg" width="500" />
        <span class="card-category-btn button">BUTTON</span>
    </a>
</div>
</div>

2 Afbeeldingen met button

<div class="cols">
   <div class="xs-6 sm-6 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
   <div class="xs-6 sm-6 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
</div>

2 Afbeelding met button (b)

<div class="cols">
<div class="display-none display-sm-block sm-6">
    <a class="card" href="/">
        <img alt="" class="card-img" height="300" loading="lazy" src="/media/geboortekaartjenorimetfoliedruk1.jpg" width="500" />
        <span class="card-category-btn button">BUTTON</span>
    </a>
</div>

<div class="display-none display-sm-block sm-6">
    <a class="card" href="/">
        <img alt="" class="card-img" height="300" loading="lazy" src="/media/geboortekaartjenorimetfoliedruk1.jpg" width="500" />
        <span class="card-category-btn button">BUTTON</span>
    </a>
</div>

<div class="xs-6 xsm-6 display-sm-none">
    <a class="card" href="/">
        <img alt="" class="card-img" height="300" loading="lazy" src="/media/geboorte-folie-mobiel.jpg" width="500" />
        <span class="card-category-btn button">BUTTON</span>
    </a>
</div>

<div class="xs-6 xsm-6 display-sm-none">
    <a class="card" href="/">
        <img alt="" class="card-img" height="300" loading="lazy" src="/media/geboorte-folie-mobiel.jpg" width="500" />
        <span class="card-category-btn button">BUTTON</span>
    </a>
</div>
</div>

3 Afbeeldingen met button (Let op: op mobiel worden de eerste 2 afbeeldingen weergegeven)

<div class="cols">
   <div class="xs-6 sm-4 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpgg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
   <div class="xs-6 sm-4 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
   <div class="display-none display-sm-block sm-4 mb-4 ">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
</div>

4 Afbeeldingen met button

<div class="cols">
   <div class="xs-6 sm-3 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
   <div class="xs-6 sm-3 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
     <div class="xs-6 sm-3 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
   <div class="xs-6 sm-3 mb-4">
      <a class="card mb-4" href="/">
      <img alt="" class="card-img" height="592" loading="lazy" src="/media/geboortekaartjejamesmetkalkpapier.jpg" width="700" />
      <span class="card-btn button">BUTTON</span>
      </a>
   </div>
</div>

Kaarten Instagram

<div class="cols sm-cols-spacing">
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2">
        <a class="card mb-3" href="#" target="_blank">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/>
            </span>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2">
        <a class="card mb-3" href="#" target="_blank">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/>
            </span>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2">
        <a class="card mb-3" href="#" target="_blank">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/>
            </span>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2">
        <a class="card mb-3" href="#" target="_blank">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/>
            </span>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2">
        <a class="card mb-3" href="#" target="_blank">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/>
            </span>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2">
        <a class="card mb-3" href="#" target="_blank">
            <span class="card-thumbnail">
                <img class="card-img" src="/media/geboortekaartjejamesmetkalkpapier.jpg"/>
            </span>
        </a>
    </div>
</div>

Responsive banner afbeelding

xxxxxxxx
<div class="cols">
      <img alt="" class="img-responsive img-center" height="359" loading="lazy" src="/media/geboortekaartjes-op-maat.pngg" width="1500" />
      </a>
   </div>
</div>