Swegon Component Library

One Column Block: Background 

<section class="panel 
    panel--compact 
    panel--image-background-m 
    panel--no-padding-vertical-m-down h-text-align-center-m">
    <figure class="panel__figure">
        <img src="/mocks/img/hero-startpage.jpg" alt="" class="panel__image">
    </figure>
    <div class="panel__inner">
        <div class="row row--justify-around">
            <div class="col col--span-12 col--span-m-10 col--span-l-8 col--no-gutter">
                <h1>Från start till mål – och vidare framåt</h1>
                <div class="preamble">

                    <p>Allt vi gör bygger på djup kunskap, lång erfarenhet och innovativt tänkande, och vi delar med oss av allt detta i våra bloggar.
                        Här hittar du nyttig och användbar kunskap, vare sig du är proffs eller privatperson.</p>

                </div>

                <p>Som branschledande aktör har Swegon unika kunskaper om hela byggprocessen. För att kunna välja rätt systemlösning krävs
                    ett övergripande helhetsperspektiv och djup kunskap om byggnadens tilltänkta funktion. Och för att sedan få
                    anläggningen perfekt fungerande på plats måste man behärska varje enskild detalj. När andra specialiserar sig
                    på det ena eller det andra, är Swegon expert på allt detta.</p>
                <ul>
                    <li>Swegon levererar ett komplett FTX-system som installeras av våra auktoriserade installatörer</li>
                    <li>Som kund kan du välja mellan standard och designutförande (till- och frånluftsdon)</li>
                    <li>Vi gör en komplett ljudberäkning av hela ditt system och kan därför erbjuda en unik ljudgaranti</li>
                    <li>Med det patenterade kanalsystemet gör du som kund ett miljömedvetet och energieffektivt val</li>
                    <li>CASA Komplett Installeras med fördel både i befintliga och nya hus där man ställer högsta möjliga&nbsp;Krav på familjens inomhusmiljö</li>
                </ul>

                <blockquote class="quote">
                    <svg class="icon quote__icon" focusable="false">
                        <use xlink:href="#icon-quote"></use>
                    </svg>
                    <div class="quote__content">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt ducimus quod harum error possimus iure distinctio quos amet excepturi
                    </div>
                    <div class="quote__reference">Loremus Ipsumus</div>
                </blockquote>

            </div>
        </div>
    </div>
</section>
 
{{#> @panel additionalClasses='h-text-align-center-m'}}
    <div class="row row--justify-around">
        <div class="col col--span-12 col--span-m-10 col--span-l-8 col--no-gutter">
            {{#if title}}
                <h1>{{{title}}}</h1>
            {{/if}}
            {{#if preamble}}
                <div class="preamble">
                    {{{preamble}}}
                </div>
            {{/if}}
            {{#if paragraph}}
                {{{paragraph}}}
            {{/if}}
            {{#if quote}}
                {{render '@quote' quote}}
            {{/if}}
            {{#> @partial-block}}
            {{/@partial-block}}
        </div>
    </div>
{{/@panel}}
 
{
  "modifiers": [
    "compact",
    "image-background-m",
    "no-padding-vertical-m-down"
  ],
  "title": "Från start till mål – och vidare framåt",
  "preamble": "\n        <p>Allt vi gör bygger på djup kunskap, lång erfarenhet och innovativt tänkande, och vi delar  med oss av allt detta i våra bloggar.\n        Här hittar du nyttig och användbar kunskap, vare sig du är proffs eller privatperson.</p>\n        ",
  "paragraph": "\n            <p>Som branschledande aktör har Swegon unika kunskaper om hela byggprocessen. För att kunna välja rätt systemlösning krävs\n            ett övergripande helhetsperspektiv och djup kunskap om byggnadens tilltänkta funktion. Och för att sedan få\n            anläggningen perfekt fungerande på plats måste man behärska varje enskild detalj. När andra specialiserar sig\n            på det ena eller det andra, är Swegon expert på allt detta.</p>\n            <ul>\n                <li>Swegon levererar ett komplett FTX-system som installeras av våra auktoriserade installatörer</li>\n                <li>Som kund kan du välja mellan standard och designutförande (till- och frånluftsdon)</li>\n                <li>Vi gör en komplett ljudberäkning av hela ditt system och kan därför erbjuda en unik ljudgaranti</li>\n                <li>Med det patenterade kanalsystemet gör du som kund ett miljömedvetet och energieffektivt val</li>\n                <li>CASA Komplett Installeras med fördel både i befintliga och nya hus där man ställer högsta möjliga&nbsp;Krav på familjens inomhusmiljö</li>\n            </ul>\n        ",
  "quote": {
    "quote": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt ducimus quod harum error possimus iure distinctio quos amet excepturi",
    "reference": "Loremus Ipsumus"
  },
  "image": {
    "src": "/mocks/img/hero-startpage.jpg",
    "alt": ""
  }
}

No notes defined.