<div class="section--highlighted">
    <div class="content-container">
        <div class="preview-inner-inner-container">
            <h1>Heading 1</h1>
            <p class="section--highlighted">Normal text below an heading 1.</p>
            <h1><a href="#">Heading 1 with a link</a></h1>
            <p class="section--highlighted">Normal text below an heading 1.</p>

            <h2>Heading 2</h2>
            <p class="section--highlighted">Normal text below an heading 2.</p>
            <h2><a href="#">Heading 2 with a link</a></h2>
            <p class="section--highlighted">Normal text below an heading 2.</p>

            <h3>Heading 3</h3>
            <p class="section--highlighted">Normal text below an heading 3.</p>
            <h3><a href="#">Heading 3 with a link</a></h3>
            <p class="section--highlighted">Normal text below an heading 3.</p>

            <h4>Heading 4</h4>
            <p class="section--highlighted">Normal text below an heading 4.</p>
            <h4><a href="#">Heading 4 with a link</a></h4>
            <p class="section--highlighted">Normal text below an heading 4.</p>

            <h5>Heading 5</h5>
            <p class="section--highlighted">Normal text below an heading 5.</p>
            <h5><a href="#">Heading 5 with a link</a></h5>
            <p class="section--highlighted">Normal text below an heading 5.</p>

            <h6>Heading 6</h6>
            <p class="section--highlighted">Normal text below an heading 6.</p>
            <h6><a href="#">Heading 6 with a link</a></h6>
            <p class="section--highlighted">Normal text below an heading 6.</p>

            <p class="section--highlighted">Paragraphs <a href="#">link</a></p>
            <p><input type="button" class="btn btn--small section--highlighted" value="Button">
            </p>
            <p><input type="button" class="btn btn--medium section--highlighted" value="Button">
            </p>
            <p><button class="btn btn--large section--highlighted">Button</button>
            </p>
        </div>

        <div class="preview-inner-inner-container">
            <a href="" class="cta-link">
  <span class="icon icon-link"></span>
  <h3 class="title">Graag meer info?</h3>
  <span class="document">Bezoek onze website</span>
</a>
        </div>

        <div class="preview-inner-inner-container">
            <h2 class="styleguide-title">Forms</h2>
            <div class="preview-inner-container">
                <form class="section--highlighted">
                    <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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <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 section--highlighted" 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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <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" class="section--highlighted" />

                                        <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" class="section--highlighted" />

                                        <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" class="section--highlighted">
</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 section--highlighted" />
                                        <label for="checkbox-1">Label checkbox 1
</label>

                                        <input type="checkbox" id="checkbox-2" name="checkbox-2" class="checkbox section--highlighted" />
                                        <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 section--highlighted" />
                                        <label for="radio-1">Label radio 1
</label>

                                        <input type="radio" id="radio-2" name="radiogroup" class="radio section--highlighted" />
                                        <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" class="section--highlighted">
  
          <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" class="section--highlighted">
      <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 section--highlighted">
      <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
</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" class="section--highlighted" />
                                        <div class="description"></div>

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

                            <div class="form-item address-firstname">
                                <div class="form-label">
                                    <label for="address-firstname">Firstname
</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" class="section--highlighted" />
                                        <div class="description"></div>

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

                            <div class="form-item address-street">
                                <div class="form-label">
                                    <label for="address-street">Street
</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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <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" class="section--highlighted" />
                                        <div class="description"></div>

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

                            <div class="form-item address-city">
                                <div class="form-label">
                                    <label for="address-city">City
</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" class="section--highlighted" />
                                        <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" class="section--highlighted">
  
          <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
</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" class="section--highlighted" />
                                        <div class="description"></div>

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

                        </div>
                    </fieldset>

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

                </form>
            </div>
        </div>
    </div>
</div>
<div class="{{ modifier }}">
  <div class="content-container">
    <div class="preview-inner-inner-container">
      {% include '@h1' with { 'h1_text': 'Heading 1' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 1.'} %}
      {% include '@h1' with { 'h1_text': '<a href="#">Heading 1 with a link</a>' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 1.'} %}

      {% include '@h2' with { 'h2_text': 'Heading 2' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 2.'} %}
      {% include '@h2' with { 'h2_text': '<a href="#">Heading 2 with a link</a>' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 2.'} %}

      {% include '@h3' with { 'h3_text': 'Heading 3' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 3.'} %}
      {% include '@h3' with { 'h3_text': '<a href="#">Heading 3 with a link</a>' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 3.'} %}

      {% include '@h4' with { 'h4_text': 'Heading 4' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 4.'} %}
      {% include '@h4' with { 'h4_text': '<a href="#">Heading 4 with a link</a>' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 4.'} %}

      {% include '@h5' with { 'h5_text': 'Heading 5' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 5.'} %}
      {% include '@h5' with { 'h5_text': '<a href="#">Heading 5 with a link</a>' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 5.'} %}

      {% include '@h6' with { 'h6_text': 'Heading 6' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 6.'} %}
      {% include '@h6' with { 'h6_text': '<a href="#">Heading 6 with a link</a>' } %}
      {% include '@paragraph' with { 'text': 'Normal text below an heading 6.'} %}

      {% include '@paragraph' with { 'text': 'Paragraphs <a href="#">link</a>'} %}
      <p>{% include '@button-sm' with { 'text': 'Button'} %}</p>
      <p>{% include '@button-md' with { 'text': 'Button'} %}</p>
      <p>{% include '@button-lg' with { 'text': 'Button'} %}</p>
    </div>

    <div class="preview-inner-inner-container">
      {% include '@cta-link' with { 'title': 'Graag meer info?', 'link_text': 'Bezoek onze website', 'modifier': 'link' }%}
    </div>

    <div class="preview-inner-inner-container">
      {% include '@forms' %}
    </div>
  </div>
</div>
{
  "modifier": "section--highlighted"
}
  • Content:
    @each $theme, $colors in $themes {
      %section--#{$theme},
      .section--#{$theme} {
        background: map-get($colors, 'section-background');
        color: map-get($colors, 'section-text-color');
      }
    }
    
    *[class*="section--"] {
      @include clearfix();
    }
    
  • URL: /components/raw/section/_section.scss
  • Filesystem Path: components/11-base/section/_section.scss
  • Size: 245 Bytes

Color sections

In the style guide of Ghent there are 5 color sections (or schemes) available. These are named after the content sections.

  • Default: The default content region (white background, gray text)
  • Inverse: An inverse region to visualise a different content region (light blue background, gray text)
  • Highlighted: A content region in need of the attention of the end-user. For example an emergency warning. (orange background, gray text)
  • Accent: An accent region mostly used for Stad Gent branded services like Ghent info. (blue background, white text)
  • Wrapper: Used as header and footer. (dark blue background, white text)

Custom color sections

All components are dependent on a section context. This means that you always need a wrapper section, and that components will change their theming based on this wrapper section. If no wrapper is explicitly defined, a default section is assumed.

When inspecting individual components like a heading 1 atom, you will see that the SASS code uses one particular mixin to define theming of components based on their wrapper.

themify()

More technical information on this mixin can be found in the chapter about mixins, where it is fully documented.

To create more sections in your subtheme we provide a SASS map $overwrite-themes. This variable needs to be structured like the $themes variable. SASS will then merge these two maps into 1 themes map to define all the basic sections with your own custom sections.