Swegon Component Library

Contact Simple 

<section class="panel theme--green 
    panel--leaf-pattern-bottom 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around">
            <div class="col col--span-12 col--span-s-8">
                <h1 class="h-text-center">Välkommen till Swegon Sverige AB</h1>

                <div class="preamble h-text-center">
                    <p>
                        Hitta ditt närmaste kontor i rullistan nedan.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="panel theme--white 
    panel--compact ">
    <div class="panel__inner">
        <div class="row">
            <div class="col">
                <h2 class="h-text-center">Här hittar du Swegons kontor och medarbetare</h2>
            </div>
        </div>

        <div class="row">
            <div class="col col--span-l-4 col--span-xl-3">
                <div class="theme--grey h-padding-x-2 h-padding-y-4 h-margin-bottom-2">
                    <address>
                        <form class="contact-filter-form" method="post" action="#">
                            <div class="h-margin-bottom-3">
                                <div class="form-item form-item--select ">
                                    <label for="office" class="form-item__label">
                                        Välj kontor
                                    </label>
                                    <select id="office" class="select__select js-select-submit" name="office">
                                        <option class="select__option" value="select">Göteborg</option>
                                        <option class="select__option" value="select">Stockholm</option>
                                        <option class="select__option" value="select">Östersund</option>
                                        <option class="select__option" value="select">Norrköping</option>
                                    </select>
                                </div>

                            </div>
                            <h5>Central organisation Swegon Sverige</h5>
                            <strong class="h-no-margin">Fakturadress:</strong>
                            <p class="h-no-margin">Swegon Sverige AB</p>
                            <p class="h-no-margin">Frejgatan 14</p>
                            <p>SE-535 30 Kvänum</p>

                            <p class="h-no-margin"><strong>Säte:</strong>Göteborg</p>
                            <p class="h-no-margin"><strong>Org.nr.:</strong> 559078-3931</p>
                            <p class="h-no-margin"><strong>VAT nr:</strong> SE559078393101</p>
                        </form>
                    </address>

                </div>
            </div>
            <div class=" col--span-12 col--span-l-8 col--span-xl-9">
                <div class="row">
                    <div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4">
                        <div class="contact-card-simple">
                            <figure class="contact-card-simple__figure">
                                <img src="/mocks/img/alexander-miletti.png" alt="Robert Kristiansson, VD Swegon Sverige" class="contact-card-simple__image">
                            </figure>
                            <div class="contact-card-simple__details">
                                <h5 class="contact-card-simple__name">Robert Kristiansson</h5>

                                <span class="contact-card-simple__title">VD Swegon Sverige</span>

                                <a href="tel:011-32 15 21" type="tel" class="contact-card-simple__link">011-32 15 21</a>
                                <a href="tel:070-516 21 65" type="tel" class="contact-card-simple__link">070-516 21 65</a>
                                <a href="mailto:robert.kristiansson@swegon.se" type="email" class="contact-card-simple__link">Send e-mail</a>
                            </div>
                        </div>

                    </div>
                    <div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4">
                        <div class="contact-card-simple">
                            <figure class="contact-card-simple__figure">
                                <img src="/mocks/img/alexander-miletti.png" alt="Robert Kristiansson, VD Swegon Sverige" class="contact-card-simple__image">
                            </figure>
                            <div class="contact-card-simple__details">
                                <h5 class="contact-card-simple__name">Alexander Miletti</h5>

                                <span class="contact-card-simple__title">Affärs&shy;utveckling Room Units</span>

                                <a href="tel:011-32 15 21" type="tel" class="contact-card-simple__link">011-32 15 21</a>
                                <a href="tel:070-516 21 65" type="tel" class="contact-card-simple__link">070-516 21 65</a>
                                <a href="mailto:robert.kristiansson@swegon.se" type="email" class="contact-card-simple__link">Send e-mail</a>
                            </div>
                        </div>

                    </div>
                    <div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4">
                        <div class="contact-card-simple">
                            <figure class="contact-card-simple__figure">
                                <img src="/mocks/img/alexander-miletti.png" alt="Robert Kristiansson, VD Swegon Sverige" class="contact-card-simple__image">
                            </figure>
                            <div class="contact-card-simple__details">
                                <h5 class="contact-card-simple__name">Anders de Maré</h5>

                                <span class="contact-card-simple__title">Affärsområdes&shy;chef Cooling/Heating</span>

                                <a href="tel:011-32 15 21" type="tel" class="contact-card-simple__link">011-32 15 21</a>
                                <a href="tel:070-516 21 65" type="tel" class="contact-card-simple__link">070-516 21 65</a>
                                <a href="mailto:robert.kristiansson@swegon.se" type="email" class="contact-card-simple__link">Send e-mail</a>
                            </div>
                        </div>

                    </div>
                    <div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4">
                        <div class="contact-card-simple">
                            <figure class="contact-card-simple__figure">
                                <img src="/mocks/img/alexander-miletti.png" alt="Robert Kristiansson, VD Swegon Sverige" class="contact-card-simple__image">
                            </figure>
                            <div class="contact-card-simple__details">
                                <h5 class="contact-card-simple__name">Anna Wallin</h5>

                                <span class="contact-card-simple__title">Sälj- och Marknads&shy;koordinator</span>

                                <a href="tel:011-32 15 21" type="tel" class="contact-card-simple__link">011-32 15 21</a>
                                <a href="tel:070-516 21 65" type="tel" class="contact-card-simple__link">070-516 21 65</a>
                                <a href="mailto:robert.kristiansson@swegon.se" type="email" class="contact-card-simple__link">Send e-mail</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
{{#> @panel theme="green" modifiers="leaf-pattern-bottom,compact"}}
    <div class="row row--justify-around">
        <div class="col col--span-12 col--span-s-8">
            <h1 class="h-text-center">Välkommen till Swegon Sverige AB</h1>

            <div class="preamble h-text-center">
                <p>
                    Hitta ditt närmaste kontor i rullistan nedan.
                </p>
            </div>
        </div>
    </div>
{{/@panel}}

{{#> @panel theme="white" modifiers="compact"}}
    <div class="row">
        <div class="col">
            <h2 class="h-text-center">Här hittar du Swegons kontor och medarbetare</h2>
        </div>
    </div>

    <div class="row">
        <div class="col col--span-l-4 col--span-xl-3">
            <div class="theme--grey h-padding-x-2 h-padding-y-4 h-margin-bottom-2">
                <address>
                    <form class="contact-filter-form" method="post" action="#">
                        <div class="h-margin-bottom-3">
                            {{render "@select--default" officeSelect }}
                        </div>
                        <h5>Central organisation Swegon Sverige</h5>
                        <strong class="h-no-margin">Fakturadress:</strong>
                        <p class="h-no-margin">Swegon Sverige AB</p>
                        <p class="h-no-margin">Frejgatan 14</p>
                        <p>SE-535 30 Kvänum</p>

                        <p class="h-no-margin"><strong>Säte:</strong>Göteborg</p>
                        <p class="h-no-margin"><strong>Org.nr.:</strong> 559078-3931</p>
                        <p class="h-no-margin"><strong>VAT nr:</strong> SE559078393101</p>
                    </form>
                </address>

            </div>
        </div>
        <div class=" col--span-12 col--span-l-8 col--span-xl-9">
            <div class="row">
                {{#each contacts}}
                    <div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4">
                        {{render "@contact-card-simple" this merge=true}}
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
{{/@panel}}
 
{
  "marketSelectorModal": {
    "id": "market-selector",
    "closeLabel": "Stäng"
  },
  "countrySelect": {
    "name": "country",
    "label": "Välj land",
    "id": "country",
    "options": [
      {
        "name": "Sverige",
        "value": "select"
      }
    ]
  },
  "officeSelect": {
    "name": "office",
    "label": "Välj kontor",
    "id": "office",
    "additionalClasses": "js-select-submit",
    "options": [
      {
        "name": "Göteborg",
        "value": "select"
      },
      {
        "name": "Stockholm",
        "value": "select"
      },
      {
        "name": "Östersund",
        "value": "select"
      },
      {
        "name": "Norrköping",
        "value": "select"
      }
    ]
  },
  "contacts": [
    {
      "name": "Robert Kristiansson"
    },
    {
      "name": "Alexander Miletti",
      "title": "Affärs&shy;utveckling Room Units"
    },
    {
      "name": "Anders de Maré",
      "title": "Affärsområdes&shy;chef Cooling/Heating"
    },
    {
      "name": "Anna Wallin",
      "title": "Sälj- och Marknads&shy;koordinator"
    }
  ],
  "form": {
    "disclaimer": "\n                <p class=\"disclaimer\">Din integritet är viktig för oss. Swegon använder dina uppgifter till att förse dig med information om våra produkter och tjänster. Du kan avanmäla dig från denna kommunikation när som helst. För mer information, se vår <a href=\"#\">integritetspolicy</a>.</p>\n                <p class=\"disclaimer\">Om du har frågor om hur vi hanterar din information så tveka inte att höra av dig till <a href=\"#\">privacy@swegon.com</a></p>\n            "
  }
}

No notes defined.