Foehn Design System

Autority Address: Search 

<h2 itemprop="name" class="h2 mt-0">
    <a href="#" itemprop="url">Service name</a>
</h2>

<h3 class="h4">Rechercher l&#39;entité compétente selon la commune ou le numéro postal (NPA)</h3>

<form class="input-group vd-search-form-regular" action="#" role="search">
    <label class="visually-hidden" for="search-form" id="search-form-label">Rechercher l&#39;entité compétente selon la commune ou le numéro postal (NPA)</label>
    <input id="search-form" type="text" class="form-control" aria-describedby="search-form-label">
    <span class="input-group-btn">
        <button class="btn btn-dark" type="submit" aria-label="Rechercher"><i class="fas fa-search" aria-hidden="true"></i></button>
    </span>
</form>

<ul>

    <li><a href="#">Bofflens</a></li>

    <li><a href="#">Bogis</a></li>

    <li><a href="#">Bonvillard</a></li>

</ul>
 
<h2 itemprop="name"
    {%- if titleModifier %} class="{{ titleModifier }}" {% endif %}>
    {%- if url %}
    <a href="{{ url }}" itemprop="url">
        {%- endif %}
        {%- if accessibleName %}
        <span class="visually-hidden">{{ accessibleName }}</span>{% endif -%}
        {{ name }}
        {%- if url -%}
    </a>
    {%- endif %}
</h2>
{% if division -%}
<h3 class="vd-heading-light h4 mt-0">{{ division }}</h3>
{%- endif %}
{% if description %}<p>{{ description }}</p>{% endif %}
{% render '@search-form--regular', search, true %}
{% if suggestions %}
<ul>
    {% for suggestion in suggestions %}
    <li><a href="{{ suggestion.url }}">{{ suggestion.text }}</a></li>
    {% endfor %}
</ul>
{% endif %}
 
{
  "name": "Service name",
  "accessibleLink": "Accéder à la page de: ",
  "url": "#",
  "titleModifier": "h2 mt-0",
  "address": {
    "streetAddress": "Rue de la Barre 2",
    "postOfficeBoxNumber": "5278",
    "postalCode": "1000",
    "addressLocality": "Lausanne",
    "addressCountry": "Suisse"
  },
  "telephone": "+41 21 123 45 67",
  "email": "service.departement@vd.ch",
  "button": {
    "text": "Nous écrire",
    "href": "#",
    "title": "Formulaire de contact"
  },
  "search": {
    "heading": {
      "level": "h3",
      "text": "Rechercher l'entité compétente selon la commune ou le numéro postal (NPA)",
      "styleModifier": "h4"
    },
    "label": "Rechercher l'entité compétente selon la commune ou le numéro postal (NPA)",
    "placeholder": false
  },
  "suggestions": [
    {
      "text": "Bofflens",
      "url": "#"
    },
    {
      "text": "Bogis",
      "url": "#"
    },
    {
      "text": "Bonvillard",
      "url": "#"
    }
  ]
}

Make sure to follow Schema.org structured data and test them.