<h1>Styleguide</h1>

<h2 class="styleguide-title">Colors</h2>
<div class="preview-inner-container">
    <div class="color" style="background: #2C3F48">
        <p>$color-darkest-blue</p>
        <p>#2C3F48</p>
    </div>
    <div class="color" style="background: #00597A">
        <p>$color-dark-blue</p>
        <p>#00597A</p>
    </div>
    <div class="color" style="background: #007DB3">
        <p>$color-blue</p>
        <p>#007DB3</p>
    </div>
    <div class="color" style="background: #D0DDE0">
        <p>$color-light-blue</p>
        <p>#D0DDE0</p>
    </div>
    <div class="color" style="background: #ECF5F7">
        <p>$color-lightest-blue</p>
        <p>#ECF5F7</p>
    </div>
    <div class="color" style="background: #404546">
        <p>$color-darkest-gray</p>
        <p>#404546</p>
    </div>
    <div class="color" style="background: #595f60">
        <p>$color-dark-gray</p>
        <p>#595f60</p>
    </div>
    <div class="color" style="background: #9DA8AF">
        <p>$color-gray</p>
        <p>#9DA8AF</p>
    </div>
    <div class="color" style="background: #E2E2E2">
        <p>$color-light-gray</p>
        <p>#E2E2E2</p>
    </div>
    <div class="color" style="background: #F4F4F4">
        <p>$color-lightest-gray</p>
        <p>#F4F4F4</p>
    </div>
    <div class="color" style="background: #F39200">
        <p>$color-orange</p>
        <p>#F39200</p>
    </div>
    <div class="color" style="background: #FFFFFF">
        <p>$color-white</p>
        <p>#FFFFFF</p>
    </div>
    <div class="color" style="background: #c2e2f0">
        <p>$color-color-white-blue</p>
        <p>#c2e2f0</p>
    </div>
    <div class="color" style="background: #ffa927">
        <p>$color-color-orange-light</p>
        <p>#ffa927</p>
    </div>
    <div class="color" style="background: #ffbd5a">
        <p>$color-color-orange-lighter</p>
        <p>#ffbd5a</p>
    </div>
</div>

<h2 class="styleguide-title">Fonts & text styles</h2>
<div class="preview-inner-container">
    <p>Base font-size (mobile, until 680px): 16px</p>
    <p>Base font-size (tablet, small desktop, until 1360px): 18px</p>
    <p>Base font-size (large desktop, starting from 1360px): 20px</p>

    <p>Elements that deviate from these values are to be scaled with rems.</p>

</div>

<h2 class="styleguide-title">Headings</h2>
<div class="preview-inner-container">
    <h1>Heading 1</h1>
    <h1><a href="#">Heading 1 with a link</a></h1>
    <h2>Heading 2</h2>
    <h2><a href="#">Heading 2 with a link</a></h2>
    <h3>Heading 3</h3>
    <h3><a href="#">Heading 3 with a link</a></h3>
    <h4>Heading 4</h4>
    <h4><a href="#">Heading 4 with a link</a></h4>
    <h5>Heading 5</h5>
    <h5><a href="#">Heading 5 with a link</a></h5>
    <h6>Heading 6</h6>
    <h6><a href="#">Heading 6 with a link</a></h6>
</div>

<h2 class="styleguide-title">Paragraph types</h2>
<div class="preview-inner-container">
    <h3 class="styleguide">Normal paragraph</h3>
    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In
        <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie
        id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
    <h3 class="styleguide">Small text paragraph</h3>
    <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In
        <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie
        id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
    <h3 class="styleguide">Caption text paragraph</h3>
    <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In
        <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie
        id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
    <h3 class="styleguide">Left aligned paragraph</h3>
    <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In
        <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie
        id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
    <h3 class="styleguide">Right aligned paragraph</h3>
    <p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In
        <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie
        id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>

<h2 class="styleguide-title">Lists</h2>
<div class="preview-inner-container">
    <h3 class="styleguide">Normal list</h3>
    <ul class="">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>

    <h3 class="styleguide">list without styling</h3>
    <ul class="no-style">
        <li>item 1</li>
        <li><i class='icon-twitter'></i> item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>

    <h3 class="styleguide">Link list</h3>
    <ul class="links">
        <li><a href='#'>item 1</a></li>
        <li><a href='#'>item 2</a></li>
        <li><a href='#'>item 3</a></li>
        <li><a href='#'>item 4</a></li>
    </ul>
</div>

<h2 class="styleguide-title">Buttons</h2>
<div class="preview-inner-container">
    <h3 class="styleguide">Small buttons</h3>
    <input type="button" class="btn btn--small " value="Button">
    <h3 class="styleguide">Inline: Small buttons</h3>
    <input type="button" class="btn btn--small inline" value="Button">

    <h3 class="styleguide">Medium buttons</h3>
    <input type="button" class="btn btn--medium " value="Button">
    <h3 class="styleguide">Inline: Medium buttons</h3>
    <input type="button" class="btn btn--medium inline" value="Button">

    <h3 class="styleguide">Large buttons</h3>
    <button class="btn btn--large ">Button</button>
    <h3 class="styleguide">Inline: Large buttons</h3>
    <button class="btn btn--large inline">Button</button>
</div>

<h2 class="styleguide-title">Image styles</h2>
<div class="preview-inner-inner-container">
    <h3 class="styleguide">Default image</h3>
    <img src="https://via.placeholder.com/800x532" alt="" />
</div>

<div class="preview-inner-inner-container">
    <h3 class="styleguide">Image without styling</h3>
    <img src="https://via.placeholder.com/800x532" alt="" class="no-style" />
</div>

<div class="preview-inner-inner-container">
    <h3 class="styleguide">Image as a circle (only usable with square images)</h3>
    <img src="https://via.placeholder.com/400x400" alt="" class="circle" />
</div>

<h2 class="styleguide-title">Messages</h2>
<div class="preview-inner-container">
    <h3 class="styleguide">Success message</h3>
    <p>
        <div class="messages messages--status">
            <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
                euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
        </div>
    </p>

    <h3 class="styleguide">Error message</h3>
    <p>
        <div class="messages messages--error">
            <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
                euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
        </div>
    </p>

    <h3 class="styleguide">Warning message</h3>
    <p>
        <div class="messages messages--warning">
            <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
                euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
        </div>
    </p>
</div>

<h2 class="styleguide-title">Icons</h2>
<div class="preview-inner-container">
    <p><i class="icon-menu"></i> .icon-menu</p>
    <p><i class="icon-caret"></i> .icon-caret</p>
    <p><i class="icon-alert"></i> .icon-alert</p>
    <p><i class="icon-critical"></i> .icon-critical</p>
    <p><i class="icon-clip"></i> .icon-clip</p>
    <p><i class="icon-email"></i> .icon-email</p>
    <p><i class="icon-hidden"></i> .icon-hidden</p>
    <p><i class="icon-loc"></i> .icon-loc</p>
    <p><i class="icon-search"></i> .icon-search</p>
    <p><i class="icon-digipolis"></i> .icon-digipolis</p>
    <p><i class="icon-arrow-up"></i> .icon-arrow-up</p>
    <p><i class="icon-arrow-down"></i> .icon-arrow-down</p>
    <p><i class="icon-form_fill"></i> .icon-form_fill</p>
    <p><i class="icon-paper"></i> .icon-paper</p>
    <p><i class="icon-tag"></i> .icon-tag</p>
    <p><i class="icon-newtab"></i> .icon-newtab</p>
    <p><i class="icon-calender"></i> .icon-calender</p>
    <p><i class="icon-user"></i> .icon-user</p>
    <p><i class="icon-link"></i> .icon-link</p>
    <p><i class="icon-shoppingcart"></i> .icon-shoppingcart</p>
    <p><i class="icon-sort"></i> .icon-sort</p>
    <p><i class="icon-list"></i> .icon-list</p>
    <p><i class="icon-phone"></i> .icon-phone</p>
    <p><i class="icon-facebook"></i> .icon-facebook</p>
    <p><i class="icon-facebook-full"></i> .icon-facebook-full</p>
    <p><i class="icon-plus"></i> .icon-plus</p>
    <p><i class="icon-twitter"></i> .icon-twitter</p>
    <p><i class="icon-linkedin"></i> .icon-linkedin</p>
    <p><i class="icon-capacity"></i> .icon-capacity</p>
    <p><i class="icon-location"></i> .icon-location</p>
    <p><i class="icon-price"></i> .icon-price</p>
    <p><i class="icon-book"></i> .icon-book</p>
    <p><i class="icon-surface"></i> .icon-surface</p>
    <p><i class="icon-closingtime"></i> .icon-closingtime</p>
    <p><i class="icon-save"></i> .icon-save</p>
    <p><i class="icon-edit"></i> .icon-edit</p>
    <p><i class="icon-throbber"></i> .icon-throbber</p>
    <p><i class="icon-instagram"></i> .icon-instagram</p>
    <p><i class="icon-googleplus"></i> .icon-googleplus</p>
    <p><i class="icon-flickr"></i> .icon-flickr</p>
    <p><i class="icon-vimeo"></i> .icon-vimeo</p>
    <p><i class="icon-close"></i> .icon-close</p>
    <p><i class="icon-adventure"></i> .icon-adventure</p>
    <p><i class="icon-appliances"></i> .icon-appliances</p>
    <p><i class="icon-basketball"></i> .icon-basketball</p>
    <p><i class="icon-bbq"></i> .icon-bbq</p>
    <p><i class="icon-fitness"></i> .icon-fitness</p>
    <p><i class="icon-football"></i> .icon-football</p>
    <p><i class="icon-forest"></i> .icon-forest</p>
    <p><i class="icon-historical-value"></i> .icon-historical-value</p>
    <p><i class="icon-nature"></i> .icon-nature</p>
    <p><i class="icon-park"></i> .icon-park</p>
    <p><i class="icon-petanque"></i> .icon-petanque</p>
    <p><i class="icon-pingpong"></i> .icon-pingpong</p>
    <p><i class="icon-playground"></i> .icon-playground</p>
    <p><i class="icon-tie"></i> .icon-tie</p>
    <p><i class="icon-rdf"></i> .icon-rdf</p>
    <p><i class="icon-sandpit"></i> .icon-sandpit</p>
    <p><i class="icon-skateboard"></i> .icon-skateboard</p>
    <p><i class="icon-youtube"></i> .icon-youtube</p>
    <p><i class="icon-maximize"></i> .icon-maximize</p>
    <p><i class="icon-minimize"></i> .icon-minimize</p>
    <p><i class="icon-checklist"></i> .icon-checklist</p>
    <p><i class="icon-flag"></i> .icon-flag</p>
    <p><i class="icon-follow"></i> .icon-follow</p>
    <p><i class="icon-unflag"></i> .icon-unflag</p>
    <p><i class="icon-trash"></i> .icon-trash</p>
    <p><i class="icon-bulb"></i> .icon-bulb</p>
    <p><i class="icon-megaphone"></i> .icon-megaphone</p>
    <p><i class="icon-star"></i> .icon-star</p>
    <p><i class="icon-medal"></i> .icon-medal</p>
    <p><i class="icon-data"></i> .icon-data</p>
    <p><i class="icon-poll"></i> .icon-poll</p>
    <p><i class="icon-textballoon-right"></i> .icon-textballoon-right</p>
    <p><i class="icon-textballoon-left"></i> .icon-textballoon-left</p>
    <p><i class="icon-textballoon-fill-right"></i> .icon-textballoon-fill-right</p>
    <p><i class="icon-textballoon-fill-left"></i> .icon-textballoon-fill-left</p>
    <p><i class="icon-house"></i> .icon-house</p>
    <p><i class="icon-cross"></i> .icon-cross</p>
    <p><i class="icon-tick"></i> .icon-tick</p>
    <p><i class="icon-heart"></i> .icon-heart</p>
    <p><i class="icon-outdoor"></i> .icon-outdoor</p>
    <p><i class="icon-changingrooms"></i> .icon-changingrooms</p>
    <p><i class="icon-parking"></i> .icon-parking</p>
    <p><i class="icon-weelchair"></i> .icon-weelchair</p>
    <p><i class="icon-tribune"></i> .icon-tribune</p>
    <p><i class="icon-toilet"></i> .icon-toilet</p>
    <p><i class="icon-aed"></i> .icon-aed</p>
    <p><i class="icon-shower"></i> .icon-shower</p>
    <p><i class="icon-addtocalender"></i> .icon-addtocalender</p>
    <p><i class="icon-bar"></i> .icon-bar</p>
    <p><i class="icon-bikeroute"></i> .icon-bikeroute</p>
    <p><i class="icon-publictransport"></i> .icon-publictransport</p>
    <p><i class="icon-directions"></i> .icon-directions</p>
</div>

<h2 class="styleguide-title">Forms</h2>
<div class="preview-inner-container">
    <form class="">
        <fieldset>
            <legend>
                This is a fieldset title.
            </legend>
            <div class="fieldset-wrapper">
                <div class="form-item">
                    <div class="form-label">
                        <label for="textfield_id">Label textfield
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="textfield_name" id="textfield_id" />
                            <div class="description">Description textfield.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="tel_id">Label telephone field
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="tel" name="tel_name" id="tel_id" />
                            <div class="description">Description telephone field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="password_id">Label password
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="password" name="password_name" id="password_id" />
                            <div class="description">Description textfield.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="number_id">Label number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="number_name" id="number_id" />
                            <div class="description">Description number.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="date_id">Label date
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="date_name" id="date_id" class="datepicker " placeholder="dd/mm/yyyy" />
                            <div class="description">Description date field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="datetime_id">Label datetime
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="datetime" name="datetime_name" id="datetime_id" />
                            <div class="description">Description datetime field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="url_id">Label website
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="url" name="url_name" id="url_id" />
                            <div class="description">Description website field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="email_id">Label email
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="email" name="email_name" id="email_id" />

                            <div class="description">Description email.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="file_id">Label file
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="file" name="file_name" id="file_id" />

                            <div class="description">Description file.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="textarea_id">Label textarea
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <textarea name="textarea_name" id="textarea_id">
</textarea>
                            <div class="description">Description textarea.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="">Label checkbox
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">

                            <input type="checkbox" id="checkbox-1" name="checkbox-1" class="checkbox " />
                            <label for="checkbox-1">Label checkbox 1
</label>

                            <input type="checkbox" id="checkbox-2" name="checkbox-2" class="checkbox " />
                            <label for="checkbox-2">Label checkbox 2
</label>

                            <div class="description">Description checkboxes.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="">Label radiobuttons
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">

                            <input type="radio" id="radio-1" name="radiogroup" class="radio " />
                            <label for="radio-1">Label radio 1
</label>

                            <input type="radio" id="radio-2" name="radiogroup" class="radio " />
                            <label for="radio-2">Label radio 2
</label>

                            <div class="description">Description radiobuttons.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="select_id">Label select
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <select name="select_name" id="select_id">
  
          <option>Option 1</option>
    
  
          <option>Option 2</option>
    
  
          <optgroup label="Option group">
                  <option>Option 3</option>
                  <option>Option 4</option>
              </optgroup>

    
  </select>
                            <div class="description">Description select.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="multiselect_id">Label multiselect with chosen
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <select name="multiselect_name" id="multiselect_id" multiple="multiple">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
  </select>
                            <div class="description">Description multiselect with chosen.</div>

                        </div>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label">
                        <label for="multiselect_id">Label multiselect with chosen
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <select name="multiselect_name" id="multiselect_id" multiple="multiple" class="chosen-select ">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
  </select>
                            <div class="description">Description multiselect with chosen.</div>

                        </div>
                    </div>
                </div>

            </div>
        </fieldset>

        <fieldset class="inline-form-elements address-component">
            <legend>
                Personal information.
            </legend>
            <div class="fieldset-wrapper">
                <div class="form-item address-name">
                    <div class="form-label">
                        <label for="address-name">Name
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-name" id="address-name" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-firstname">
                    <div class="form-label">
                        <label for="address-firstname">Firstname
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-firstname" id="address-firstname" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-street">
                    <div class="form-label">
                        <label for="address-street">Street
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-street" id="address-street" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-number">
                    <div class="form-label">
                        <label for="address-number">Number
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="address-number" id="address-number" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-box-number">
                    <div class="form-label">
                        <label for="address-box-number">Box number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="address-box-number" id="address-box-number" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-postal-code">
                    <div class="form-label">
                        <label for="address-postal-code">Postal code
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="address-postal-code" id="address-postal-code" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-city">
                    <div class="form-label">
                        <label for="address-city">City
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-city" id="address-city" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-country">
                    <div class="form-label">
                        <label for="address-country">Country
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <select name="address-country" id="address-country">
  
          <option>Country 1</option>
    
  
          <option>Country 2</option>
    
  </select>
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-nim">
                    <div class="form-label">
                        <label for="address-nim">National Insurance Number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-nim" id="address-nim" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

            </div>
        </fieldset>

        <div class="form-actions">
            <input type="submit" value="Submit" class="btn " />
            <a href='' class="right delete" title="">Delete</a>
        </div>

    </form>
</div>

<h2 class="styleguide-title">Grid usage</h2>
<div class="preview-inner-container">
    <div class="row show-grid">
        <div class="col-mobile-12">.col-mobile-12</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-12 col-tablet-3 col-desktop-9">.col-mobile-12 .col-tablet-3 .col-desktop-9</div>
        <div class="col-mobile-12 col-tablet-9 col-desktop-3">.col-mobile-12 .col-tablet-9 .col-desktop-3</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-12 col-tablet-3 col-desktop-push-9">.col-mobile-12 .col-tablet-3 .col-desktop-push-9</div>
        <div class="col-mobile-12 col-tablet-9 col-desktop-pull-3">.col-mobile-12 .col-tablet-9 .col-desktop-pull-3</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-6 col-mobile-offset-3">.col-mobile-offset-3 .col-mobile-6</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-6">
            <div class="row show-grid">
                <div class="col-mobile-6">.col-mobile-6</div>
                <div class="col-mobile-6">.col-mobile-6</div>
            </div>
        </div>
        <div class="col-mobile-6">.col-mobile-6</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-12 hidden-desktop">
            .hidden-desktop
        </div>
        <div class="col-mobile-12 hidden-tablet">
            .hidden-tablet
        </div>
        <div class="col-mobile-12 hidden-mobile">
            .hidden-mobile
        </div>
        <div class="col-mobile-12 visible-desktop">
            .visible-desktop
        </div>
        <div class="col-mobile-12 visible-tablet">
            .visible-tablet
        </div>
        <div class="col-mobile-12 visible-mobile">
            .visible-mobile
        </div>
    </div>
</div>

<h2 class="styleguide-title">Collections</h2>
<div class="preview-inner-container">
    <h2 class="styleguide">Teaser collection</h2>
    <ul class="teasers">
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=0" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid0">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid0" title="">read more</a>
                </div>
            </div>
        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=1" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid1">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid1" title="">read more</a>
                </div>
            </div>
        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=2" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid2">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid2" title="">read more</a>
                </div>
            </div>
        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=3" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid3">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid3" title="">read more</a>
                </div>
            </div>
        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=4" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid4">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid4" title="">read more</a>
                </div>
            </div>
        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=5" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid5">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid5" title="">read more</a>
                </div>
            </div>
        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <img src="https://loremflickr.com/650/400/ghent?random=6" alt="alt text" class="teaser__image" />
                <div class="teaser__content teaser__content--section">
                    <h3 id="uid6">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid6" title="">read more</a>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="preview-inner-container">
    <h2 class="styleguide">Topic collection</h2>
    <ul class="teasers teasers--topics">
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid0">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid0" title="">read more</a>
                </div>
            </div>

        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid1">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid1" title="">read more</a>
                </div>
            </div>

        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid2">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid2" title="">read more</a>
                </div>
            </div>

        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid3">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid3" title="">read more</a>
                </div>
            </div>

        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid4">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid4" title="">read more</a>
                </div>
            </div>

        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid5">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid5" title="">read more</a>
                </div>
            </div>

        </li>
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
                <div class="teaser__content teaser__content--topic">
                    <h3 id="uid6">Title text </h3>

                    <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                    <a href='javascript:void(0);' aria-labelledby="uid6" title="">read more</a>
                </div>
            </div>

        </li>
    </ul>
</div>

<h2 class="styleguide-title">Building blocks overview</h2>
<div class="preview-inner-inner-container">
    <h2 class="styleguide">Header</h2>
    <header class="header section--wrapper">
        <div class="content-container">

            <div id="logo" class="header-component">
                <div class="site-logo">
                    <a href="#" title="Home" rel="home">
      <img src="/styleguide/img/svg/logo.svg" alt="Home"  />
    </a>
                    <div class="site-name">
                        <div>
                            <p class="">City of Ghent Sitename</p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="profile" class="header-component right">
                <div class="mijn-gent-block">

                    <div class="toggle">
                        <div class="label">
                            <a href='javascript:(void);' class="toggle" title="">Username</a>
                        </div>
                        <div class="picture">
                            <img src="https://via.placeholder.com/32x32" alt="Username" />
                        </div>
                    </div>

                    <div class="content">
                        <div class="mijn-gent-component">
                            <header>
                                <h3>Mijn Bibliotheek Gent</h3>
                            </header>

                            <section>
                                <ul class="no-style">
                                    <li><a href='javascript:(void);'>Overzicht</a></li>
                                    <li><a href='javascript:(void);'>Leestips</a></li>
                                    <li><a href='javascript:(void);'>Mijn profiel</a></li>
                                </ul>
                            </section>

                        </div>
                        <div class="mijn-gent-component">
                            <header>
                                <h3>Mijn Gent</h3>
                            </header>

                            <section>
                                <ul class="no-style">
                                    <li><a href='javascript:(void);'>Mijn profiel</a></li>
                                    <li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
                                    <li><a href='javascript:(void);'>Historiek</a></li>
                                </ul>
                            </section>

                        </div>
                        <footer>
                            <a href='javascript:(void);' title="">Afmelden</a>
                        </footer>
                    </div>

                </div>
            </div>

            <div id="header-search-mobile" class="header-search-mobile header-component right">
                <form class="form form-search">
                    <div class="form-label">
                        <label for="">
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <input type="search" name="" id="" placeholder="">
                    <input type="submit" value="" class="btn " />
                </form>
                <a href="javascript:(void);" class="close">Sluiten</a>
            </div>
            <div id="header-search" class="header-search header-component right">
                <form class="form form-search">
                    <div class="form-label">
                        <label for="">
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <input type="search" name="" id="" placeholder="">
                    <input type="submit" value="" class="btn " />
                </form>
            </div>
        </div>

    </header>

    <nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
        <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
        <ol class="content-container breadcrumb">
        </ol>
    </nav>

</div>

<div class="preview-inner-inner-container">
    <h2 class="styleguide">Newsletter block</h2>
    <div class="section--accent newsletter-block">
        <div class="content-container">
            <div class="newsletter-block__image">
                <div class="image-wrapper">
                    <img src="https://via.placeholder.com/500x250" alt="Newsletter image" />
                </div>
                <div class="island section--wrapper">
                    <h2>Don't miss the latest news of Ghent.</h2>
                </div>
            </div>
            <div class="island section--default newsletter-block__content">
                <div>
                    <h3>Subscribe to the newsletter of the City of Ghent.</h3>
                    <ul class="">
                        <li>Receive weekly updates of the City of Ghent.</li>
                        <li>Be the first to discover new events.</li>
                        <li>Already more then 12.0000 subscribers.</li>
                    </ul>
                </div>

                <div class="newsletter-block__form">
                    <input type="email" name="newsletter-email" id="newsletter-email" />

                    <input type="submit" value="Subscribe" class="btn " />
                </div>
            </div>
            <div class="island section--wrapper newsletter-block__social-media">
                <h3>Follow us on:</h3>
                <ul class="no-style">
                    <li><a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a></li>
                    <li><a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a></li>
                    <li><a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a></li>
                    <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a></li>
                    <li><a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="preview-inner-inner-container">
    <h2 class="styleguide">Footer</h2>
    <footer class="footer section--wrapper" role="contentinfo" data-columns="4">
        <div class="content-container">
            <div class="row">
                <div class="footer--column">
                    <div class="section--accent island dg-default-block">
                        <h3>Gentinfo</h3>
                        <ul class="no-style">
                            <li><a class="phone" href="tel:+3288888888">08 888 88 88 - mo - sat from 8-19u</a></li>
                            <li><a class="email" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
                            <li><a class="link" href="">Contact form</a></li>
                            <li><a class="btn textballoon">Online Chat</a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer--column">
                    <div class="dg-block-post-address island">
                        <h3>Mailing address</h3>
                        <p class=""><span>City of Ghent</span><br>
                            <span> Botermarkt 1</span><br>
                            <span>9000 Ghent</span></p>
                    </div>
                    <ul class="dg-block-links island">
                        <li><a href='https://stad.gent/werken-ondernemen/werken/werken-bij-de-stad-gent/vacatures-en-solliciteren'>Vacancies</a></li>
                        <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan;>City plan</a></li>
            <li><a href=' http://persruimte.stad.gent/ '>Press room City of Ghent</a></li>
            <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info-en-privacy '>Legal info and privacy</a></li>
    </ul>
      </div>
      <div class="footer--column">
        <div class="dg-blocks-social island">
  <h3>Volg Stad Gent op</h3>
  <ul class="no-style">
            <li><a href="https://www.facebook.com/stadsbestuurgent" class="facebook">stadsbestuurgent</a></li>
            <li><a href="https://twitter.com/stadgent" class="twitter">@Stadgent</a></li>
            <li><a href="https://www.linkedin.com/company/stad-gent" class="linkedin">Stad Gent</a></li>
            <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" class="youtube">YouTube Stad Gent</a></li>
            <li><a href="https://www.instagram.com/stadgent/" class="instagram">@stadgent</a></li>
    </ul>
</div>
      </div>
      <div class="footer--column">
        <div class="db-block-partnership">
  <p class="">In cooperation with <i class="icon-digipolis"></i> Digipolis</p>
</div>
      </div>
    </div>
  </div>
</footer>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Breadcrumbs</h2>
  <nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
  <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
  <ol class="content-container breadcrumb">
          <li><a href='# '>Stad.gent</a></li>
          <li><a href='# '>Overview</a></li>
          <li><span>Overview</span></li>
          <li><span>Overview</span></li>
          <li><span>Page title</span></li>
      </ol>
</nav>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Pagination</h2>
  <nav class="pager">
    <ul class="pager__items">
        <li class="pager__item">
            <a href="#" title="Current page">1</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 2">2</a>
        </li>
        <li class="pager__item is-active">
            <a href="#" title="Go to page 3">3</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 4">4</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 5">5</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 6">6</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 7">7</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 8">8</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 9">9</a>
        </li>
        <li class="pager__item pager__item--ellipsis" role="presentation"></li>
        <li class="pager__item pager__item--next">
            <a href="#" title="Go to the next page" rel="next">next ›</a>
        </li>
        <li class="pager__item pager__item--last">
            <a href="#" title="Go to the last page">last »</a>
        </li>
    </ul>
</nav>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Search</h2>
  <form class="form form-search">
  <div class="form-label">
    <label for="">What are you looking for?
</label>
  </div>
  <input type="search"
       name="header-search"
       id="header-search"
       placeholder="What are you looking for?"
                class="inline"
       >
  <input type="submit"
       value="Search"
       class="btn btn--inline"
/>
</form>
</div>


<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA link</h2>
  <a href="" class="cta-link">
  <span class="icon icon-link"></span>
  <h3 class="title">Want more info?</h3>
  <span class="document">Visit our website</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA document</h2>
  <a href="" class="cta-link">
  <span class="icon icon-clip"></span>
  <h3 class="title">Want more info?</h3>
  <span class="document">Download</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA form fill</h2>
  <a href="" class="cta-link">
  <span class="icon icon-form-fill"></span>
  <h3 class="title">Fill in the form</h3>
  <span class="document">Fill in</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA email</h2>
  <a href="" class="cta-link">
  <span class="icon icon-email"></span>
  <h3 class="title">Contact us by email</h3>
  <span class="document">Mail</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA phone</h2>
  <a href="" class="cta-link">
  <span class="icon icon-phone"></span>
  <h3 class="title">Contact us by phone</h3>
  <span class="document">Call us</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA location</h2>
  <a href="" class="cta-link">
  <span class="icon icon-loc"></span>
  <h3 class="title">Location</h3>
  <span class="document">Location</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Form steps</h2>
  <div class="form-progress">
  <ul class="no-style">
          <li class="progress progress-previous">
        <a href="javascript:(void);" class="indicator">
          <span class='count '><i class="icon icon-check"></i></span>
          <span class="label">Step 1 title</span>
        </a>
      </li>
              <li class="progress progress-active">
        <a href="javascript:(void);" class="indicator">
          <span class='count '>2</span>
          <span class="label">Step 2 title</span>
        </a>
      </li>
              <li class="progress">
        <span class='count '>3</span>
        <span class="label">Step 3 title</span>
      </li>
              <li class="progress">
        <span class='count '>4</span>
        <span class="label">Step 4 title</span>
      </li>
              <li class="progress">
        <span class='count '>5</span>
        <span class="label">Step 5 title</span>
      </li>
              <li class="progress">
        <span class='count '>6</span>
        <span class="label">Step 6 title</span>
      </li>
              <li class="progress">
        <span class='count '>7</span>
        <span class="label">Step 7 title</span>
      </li>
      </ul>
</div>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Page wide image</h2>
  <div class="page-wide-image-wrapper">
  <figure class="page-wide-image">
    <img src="https://via.placeholder.com/1600x420" alt="Page wide image" class="no-style" />

    <figcaption>
      <div class="description">Caption text comes here.</div>

    </figcaption>
  </figure>

  <h2>Page wide title</h2>
</div>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Gallery</h2>
  <div class="gallery">
  <a
      href='https://via.placeholder.com/800x532 '
        class="main"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
</div>
</div>

  <h2 class="styleguide-title">Blocks overview</h2>
<div class="preview-inner-inner-container">
  <h2 class="styleguide">Disclaimer block</h2>
  <ul class="dg-block-links island">
            <li><a href='https://stad.gent/werken-ondernemen/werken/werken-bij-de-stad-gent/vacatures-en-solliciteren '>Vacancies</a></li>
            <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan;>City plan</a>
                        </li>
                        <li><a href='http://persruimte.stad.gent/'>Press room City of Ghent</a></li>
                        <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info-en-privacy'>Legal info and privacy</a></li>
                    </ul>
                </div>

                <div class="preview-inner-inner-container">
                    <h2 class="styleguide">Post address block</h2>
                    <div class="dg-block-post-address island">
                        <h3>Mailing address</h3>
                        <p class=""><span>City of Ghent</span><br>
                            <span> Botermarkt 1</span><br>
                            <span>9000 Ghent</span></p>
                    </div>
                </div>

                <div class="preview-inner-inner-container">
                    <h2 class="styleguide">Social media block</h2>
                    <div class="dg-blocks-social island">
                        <h3>Volg Stad Gent op</h3>
                        <ul class="no-style">
                            <li><a href="https://www.facebook.com/stadsbestuurgent" class="facebook">stadsbestuurgent</a></li>
                            <li><a href="https://twitter.com/stadgent" class="twitter">@Stadgent</a></li>
                            <li><a href="https://www.linkedin.com/company/stad-gent" class="linkedin">Stad Gent</a></li>
                            <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" class="youtube">YouTube Stad Gent</a></li>
                            <li><a href="https://www.instagram.com/stadgent/" class="instagram">@stadgent</a></li>
                        </ul>
                    </div>
                </div>
<h1>Styleguide</h1>

  <h2 class="styleguide-title">Colors</h2>
  <div class="preview-inner-container">
    {% include '@colors' %}
  </div>

  <h2 class="styleguide-title">Fonts & text styles</h2>
  <div class="preview-inner-container">
    {% include '@fonts' %}
  </div>

  {% include '@headings' %}

  {% include '@paragraph-types' with {
    'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.'
  } %}

  {% include '@lists' %}

  {% include '@buttons' with { 'text': 'Button' }%}

  {% include '@image-styles' %}

  {% include '@messages-overview' %}

  {% include '@icons-overview' %}

  {% include '@forms' %}

  {% include '@grid' %}

  {% include '@collections-overview' %}

  {% include '@building-blocks-overview' %}

  {% include '@blocks-overview' %}
{
  "label_optional": "Optional",
  "colors": {
    "darkest-blue": "#2C3F48",
    "dark-blue": "#00597A",
    "blue": "#007DB3",
    "light-blue": "#D0DDE0",
    "lightest-blue": "#ECF5F7",
    "darkest-gray": "#404546",
    "dark-gray": "#595f60",
    "gray": "#9DA8AF",
    "light-gray": "#E2E2E2",
    "lightest-gray": "#F4F4F4",
    "orange": "#F39200",
    "white": "#FFFFFF",
    "color-white-blue": "#c2e2f0",
    "color-orange-light": "#ffa927",
    "color-orange-lighter": "#ffbd5a"
  },
  "h1_text": "heading 1",
  "h2_text": "heading 2",
  "h3_text": "heading 3",
  "h4_text": "heading 4",
  "h5_text": "heading 5",
  "h6_text": "heading 6",
  "icons": {
    "&#x3d;": "menu",
    "&#x3e;": "caret",
    "&#x61;": "alert",
    "&#x62;": "critical",
    "&#x63;": "clip",
    "&#x65;": "email",
    "&#x68;": "hidden",
    "&#x70;": "loc",
    "&#x73;": "search",
    "&#xe5ff;": "digipolis",
    "&#xe600;": "arrow-up",
    "&#xe601;": "arrow-down",
    "&#xe602;": "form_fill",
    "&#xe908;": "paper",
    "&#xe603;": "tag",
    "&#xe604;": "newtab",
    "&#xe605;": "calender",
    "&#xe606;": "user",
    "&#xe607;": "link",
    "&#xe608;": "shoppingcart",
    "&#xe609;": "sort",
    "&#xe60a;": "list",
    "&#xe60b;": "phone",
    "&#xe90e;": "facebook",
    "&#xe60d;": "facebook-full",
    "&#xe60e;": "plus",
    "&#xe60f;": "twitter",
    "&#xe610;": "linkedin",
    "&#xe611;": "capacity",
    "&#xe612;": "location",
    "&#xe613;": "price",
    "&#xe614;": "book",
    "&#xe615;": "surface",
    "&#xe616;": "closingtime",
    "&#xe617;": "save",
    "&#xe618;": "edit",
    "&#xe619;": "throbber",
    "&#xe61a;": "instagram",
    "&#xe61b;": "googleplus",
    "&#xe61c;": "flickr",
    "&#xe61d;": "vimeo",
    "&#xe61e;": "close",
    "&#xe61f;": "adventure",
    "&#xe620;": "appliances",
    "&#xe621;": "basketball",
    "&#xe622;": "bbq",
    "&#xe623;": "fitness",
    "&#xe624;": "football",
    "&#xe625;": "forest",
    "&#xe626;": "historical-value",
    "&#xe627;": "nature",
    "&#xe628;": "park",
    "&#xe629;": "petanque",
    "&#xe62a;": "pingpong",
    "&#xe62b;": "playground",
    "&#xe90f;": "tie",
    "&#xe62c;": "rdf",
    "&#xe62d;": "sandpit",
    "&#xe62e;": "skateboard",
    "&#xe62f;": "youtube",
    "&#xe630;": "maximize",
    "&#xe631;": "minimize",
    "&#xe632;": "checklist",
    "&#xe633;": "flag",
    "&#xe635;": "follow",
    "&#xe637;": "unflag",
    "&#xe638;": "trash",
    "&#xe800;": "bulb",
    "&#xe801;": "megaphone",
    "&#xe900;": "star",
    "&#xe901;": "medal",
    "&#xe90a;": "data",
    "&#xe902;": "poll",
    "&#xe90b;": "textballoon-right",
    "&#xe903;": "textballoon-left",
    "&#xe90c;": "textballoon-fill-right",
    "&#xe90d;": "textballoon-fill-left",
    "&#xe904;": "house",
    "&#xe905;": "cross",
    "&#xe906;": "tick",
    "&#xe907;": "heart",
    "&#xf600;": "outdoor",
    "&#xf601;": "changingrooms",
    "&#xf602;": "parking",
    "&#xf603;": "weelchair",
    "&#xf604;": "tribune",
    "&#xf605;": "toilet",
    "&#xf606;": "aed",
    "&#xf607;": "shower",
    "&#xf60a;": "addtocalender",
    "&#xf60b;": "bar",
    "&#xf60c;": "bikeroute",
    "&#xf60d;": "publictransport",
    "&#xf60e;": "directions"
  }
}

There are no notes for this item.