Swegon Component Library

Startpage: Default 

<section class="panel 
        panel--image-background-m 
        panel--compact 
        panel--margin-bottom 
        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>Feel good inside</h1>
                    <div class="preamble">

                        <p>Inomhusklimat som får människor att må, tänka och prestera bättre.</p>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="panel theme--grey 
    panel--compact 
    panel--margin-bottom ">
        <div class="panel__inner">
            <div class="row row--justify-around h-text-align-center-m">
                <div class="col col--span-12 col--span-s-8">
                    <h2>Document search</h2>
                    <div class="preamble">
                        <p>Here’s where to look up all the documentation supporting Swegon’s products.</p>
                        <p>Search by product or <a title="search by order number" href="#">search by order number</a>.</p>
                    </div>
                    <div data-react="search-widget" data-props="{&quot;endpoint&quot;:&quot;/mocks/api/search-results.json&quot;,&quot;searchPageUrl&quot;:&quot;https://int.swegon.com/sv/product-search/&quot;,&quot;form&quot;:{&quot;method&quot;:&quot;GET&quot;,&quot;body&quot;:{&quot;language&quot;:&quot;sv&quot;,&quot;includeOnlyBuyable&quot;:&quot;false&quot;}},&quot;className&quot;:&quot;search-field--big&quot;,&quot;seeMoreText&quot;:&quot;Visa alla&quot;,&quot;placeholderText&quot;:&quot;Sök produkter&quot;}"></div>

                </div>
            </div>
        </div>
    </section>
    <section class="panel 
    panel--image-background-m 
    panel--compact 
    panel--margin-bottom h-text-align-center-m">
        <figure class="panel__figure">
            <img src="/mocks/img/conference-room.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>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>
                        <a href="#" class="button">Varför Swegon?</a>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="panel theme--grey 
    panel--compact 
    panel--margin-bottom ">
        <div class="panel__inner">
            <div class="row row--justify-around h-text-align-center-m">
                <div class="col col--span-12 col--span-s-8">
                    <h2>News</h2>
                    <div class="preamble">
                        <p>These are the latest news from Swegon blogs</p>
                    </div>
                </div>
            </div>
            <div class="custom-scroller js-custom-scroller">
                <div class="custom-scroller__inner">
                    <div class="custom-scroller-list">
                        <div class="column-block col col--span-11 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                            <div class="card card--image">
                                <a href="#" class="card__cta">
                                    <figure class="card__figure">
                                        <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                                    </figure>

                                    <div class="card__body">

                                        <h4 class="card__title">
                                            Swegon engagerar sig i Sweden Green Building Council
                                        </h4>
                                        <p class="card__date">10 september 2020</p>
                                        <p class="card__description">Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).</p>

                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="column-block col col--span-11 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                            <div class="card card--image">
                                <a href="#" class="card__cta">
                                    <figure class="card__figure">
                                        <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                                    </figure>

                                    <div class="card__body">

                                        <h4 class="card__title">
                                            Stilren design och hög prestanda med nya KITE Ceiling
                                        </h4>
                                        <p class="card__date">07 september 2020</p>
                                        <p class="card__description">Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.</p>

                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="column-block col col--span-11 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                            <div class="card card--image">
                                <a href="#" class="card__cta">
                                    <figure class="card__figure">
                                        <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                                    </figure>

                                    <div class="card__body">

                                        <h4 class="card__title">
                                            Swegon engagerar sig i Sweden Green Building Council
                                        </h4>
                                        <p class="card__date">10 september 2020</p>
                                        <p class="card__description">Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).</p>

                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="column-block col col--span-11 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                            <div class="card card--image">
                                <a href="#" class="card__cta">
                                    <figure class="card__figure">
                                        <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                                    </figure>

                                    <div class="card__body">

                                        <h4 class="card__title">
                                            Stilren design och hög prestanda med nya KITE Ceiling
                                        </h4>
                                        <p class="card__date">07 september 2020</p>
                                        <p class="card__description">Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.</p>

                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="h-text-align-center h-margin-top-4">
                <a href="#" class="link link--icon ">
                    <span class="link__label">View all News</span>
                    <svg class="icon link__icon" focusable="false">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>
            </div>
        </div>
    </section>
    <div class="row ">
        <div class="col col--span-12 col--span-l-6 col--bottom-gutter-l col--no-gutter col--gutter-right-l">
            <section class="panel theme--grey 
    panel--compact 
    panel--min-height-l h-full-height">
                <div class="panel__inner">
                    <div class="main-content">
                        <h2>Du är inte ensam</h2>
                        <h6 class="h-text-color-green">
                            Bloggen för privatpersoner
                        </h6>
                        <p>Många har suttit i samma sits som du och frågat sig ”Hur gör vi med ventilationen?”. <a href="#">Och många tusentals har sedan</a> valt Swegon. Därför finns det massor av berättelser, till exempel om tekniska utmaningar som lösts, eller hur driftsekonomin blivit en glad överraskning. Referenserna är helt enkelt bevis på att vi levererar det vi utlovar – eller lite till.</p>
                        <a href="#" class="button ">
                            Guider
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div class="col col--span-12 col--span-l-6 col--bottom-gutter-l col--no-gutter col--gutter-left-l">
            <section class="panel theme--white 
    panel--compact h-full-height,min-height-l">
                <div class="panel__inner">
                    <div class="main-content">
                        <h2>Vi vet vad vi pratar om</h2>
                        <h6 class="h-text-color-red">
                            Bloggen för proffs</h6>
                        </h6>
                        <p>Det krävs vissa grundkunskaper för att förstå vad som är rätt och vad som är bra i olika sammanhang. <a href="#">Om du är osäker på det här med</a> inomhusklimat hjälper våra guider dig att förstå vad vi pratar om.</p>
                        <a href="#" class="button ">
                            Guider
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <section class="panel theme--grey 
    panel--compact 
    panel--margin-bottom h-text-align-center-m">
        <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>Sista länken i kedjan – eller första</h1>
                    <div class="preamble">

                        <p>Det är Swegons produkter som i praktiken ska leverera inomhusklimat i världsklass. Ofta under flera decennier. För att klara detta måste produkterna vara flexibla, smarta, lättanvända, ekonomiska och självklart av allra högsta kvalitet! Och det är Swegons kunskaper som ser till att allt fungerar som det ska över tid – eller kanske till och med blir bättre. För att säkerställa detta har vi många tjänster i världsklass.</p>
                        <a href="#" class="button">Produkter &amp; tjänster</a>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="panel theme--grey 
    panel--compact 
    panel--margin-bottom ">
        <div class="panel__inner">
            <div class="row row--justify-around h-text-align-center-m">
                <div class="col col--span-12 col--span-s-8">
                    <h2>Other</h2>
                    <div class="preamble">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, magna eget gravida congue,
                            ligula justo elementum sem, et sodales quam mauris sed purus.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column-block col col--span-12 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                    <div class="card card--image">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Swegon engagerar sig i Sweden Green Building Council
                                </h4>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="column-block col col--span-12 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                    <div class="card card--image">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Stilren design och hög prestanda med nya KITE Ceiling
                                </h4>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="column-block col col--span-12 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                    <div class="card card--image">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Swegon engagerar sig i Sweden Green Building Council
                                </h4>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="column-block col col--span-12 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
                    <div class="card card--image">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Stilren design och hög prestanda med nya KITE Ceiling
                                </h4>

                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="h-text-align-center h-margin-top-4">
                <a href="#" class="link link--icon ">
                    <span class="link__label">Read more</span>
                    <svg class="icon link__icon" focusable="false">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>
            </div>
        </div>
    </section>
 
{{#if heroCarousel}}
    {{ render "@hero-carousel"}}
{{else}}
    {{>@one-column-block hero }}
{{/if}}

{{#> @panel theme="grey" modifiers="compact, margin-bottom"}}
<div class="row row--justify-around h-text-align-center-m">
    <div class="col col--span-12 col--span-s-8">
        <h2>Document search</h2>
        <div class="preamble">
            <p>Here’s where to look up all the documentation supporting Swegon’s products.</p>
            <p>Search by product or <a title="search by order number" href="#">search by order number</a>.</p>
        </div>
        {{render "@search-widget"}}
    </div>
</div>
{{/@panel}}

{{>@one-column-block imageBlock }}

{{#> @panel theme="grey" modifiers="compact, margin-bottom"}}
<div class="row row--justify-around h-text-align-center-m">
    <div class="col col--span-12 col--span-s-8">
        <h2>News</h2>
        <div class="preamble">
            <p>These are the latest news from Swegon blogs</p>
        </div>
    </div>
</div>
{{#> @custom-scroller }}
<div class="custom-scroller-list">
    {{#each news.items}}
    <div
        class="column-block col col--span-11 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
        {{> @card this}}
    </div>
    {{/each}}
</div>
{{/@custom-scroller}}
<div class="h-text-align-center h-margin-top-4">
    {{>@link news.showMoreLink}}
</div>
{{/@panel}}

{{render "@two-column-block"}}

{{>@one-column-block textBlock }}

{{#> @panel theme="grey" modifiers="compact, margin-bottom"}}
<div class="row row--justify-around h-text-align-center-m">
    <div class="col col--span-12 col--span-s-8">
        <h2>Other</h2>
        <div class="preamble">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, magna eget gravida congue,
                ligula justo elementum sem, et sodales quam mauris sed purus.</p>
        </div>
    </div>
</div>
<div class="row">
    {{#each multiColumns.items}}
    <div
        class="column-block col col--span-12 col--span-s-6 col--span-l-3 no-image col--bottom-gutter col--no-gutter-bottom-l">
        {{> @card this}}
    </div>
    {{/each}}
</div>
<div class="h-text-align-center h-margin-top-4">
    {{>@link multiColumns.showMoreLink}}
</div>
{{/@panel}}
 
{
  "marketSelectorModal": {
    "id": "market-selector",
    "closeLabel": "Stäng"
  },
  "hero": {
    "modifiers": [
      "image-background-m",
      "compact",
      "margin-bottom",
      "no-padding-vertical-m-down"
    ],
    "title": "Feel good inside",
    "preamble": "\n                <p>Inomhusklimat som får människor att må, tänka och prestera bättre.</p>\n            ",
    "image": {
      "src": "/mocks/img/hero-startpage.jpg",
      "alt": ""
    }
  },
  "imageBlock": {
    "modifiers": [
      "image-background-m",
      "compact",
      "margin-bottom"
    ],
    "title": "Från start till mål – och vidare framåt",
    "preamble": "\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 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>\n                <a href=\"#\" class=\"button\">Varför Swegon?</a>\n            ",
    "image": {
      "src": "/mocks/img/conference-room.jpg",
      "alt": ""
    }
  },
  "textBlock": {
    "modifiers": [
      "compact",
      "margin-bottom"
    ],
    "theme": "grey",
    "title": "Sista länken i kedjan – eller första",
    "preamble": "\n                <p>Det är Swegons produkter som i praktiken ska leverera inomhusklimat i världsklass. Ofta under flera decennier. För att klara detta måste produkterna vara flexibla, smarta, lättanvända, ekonomiska och självklart av allra högsta kvalitet! Och det är Swegons kunskaper som ser till att allt fungerar som det ska över tid – eller kanske till och med blir bättre. För att säkerställa detta har vi många tjänster i världsklass.</p>\n                <a href=\"#\" class=\"button\">Produkter &amp; tjänster</a>\n            "
  },
  "news": {
    "items": [
      {
        "modifiers": "image",
        "title": "Swegon engagerar sig i Sweden Green Building Council",
        "description": "Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).",
        "href": "#",
        "date": "10 september 2020",
        "image": {
          "src": "/mocks/img/office-coders.jpg",
          "alt": ""
        }
      },
      {
        "modifiers": "image",
        "title": "Stilren design och hög prestanda med nya KITE Ceiling",
        "description": "Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.",
        "href": "#",
        "date": "07 september 2020",
        "image": {
          "src": "/mocks/img/conference-room.jpg",
          "alt": ""
        }
      },
      {
        "modifiers": "image",
        "title": "Swegon engagerar sig i Sweden Green Building Council",
        "description": "Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).",
        "href": "#",
        "date": "10 september 2020",
        "image": {
          "src": "/mocks/img/office-coders.jpg",
          "alt": ""
        }
      },
      {
        "modifiers": "image",
        "title": "Stilren design och hög prestanda med nya KITE Ceiling",
        "description": "Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.",
        "href": "#",
        "date": "07 september 2020",
        "image": {
          "src": "/mocks/img/conference-room.jpg",
          "alt": ""
        }
      }
    ],
    "showMoreLink": {
      "label": "View all News",
      "href": "#",
      "icon": "chevron-right"
    }
  },
  "multiColumns": {
    "items": [
      {
        "modifiers": "image",
        "title": "Swegon engagerar sig i Sweden Green Building Council",
        "href": "#",
        "image": {
          "src": "/mocks/img/office-coders.jpg",
          "alt": ""
        }
      },
      {
        "modifiers": "image",
        "title": "Stilren design och hög prestanda med nya KITE Ceiling",
        "href": "#",
        "image": {
          "src": "/mocks/img/conference-room.jpg",
          "alt": ""
        }
      },
      {
        "modifiers": "image",
        "title": "Swegon engagerar sig i Sweden Green Building Council",
        "href": "#",
        "image": {
          "src": "/mocks/img/office-coders.jpg",
          "alt": ""
        }
      },
      {
        "modifiers": "image",
        "title": "Stilren design och hög prestanda med nya KITE Ceiling",
        "href": "#",
        "image": {
          "src": "/mocks/img/conference-room.jpg",
          "alt": ""
        }
      }
    ],
    "showMoreLink": {
      "label": "Read more",
      "href": "#",
      "icon": "chevron-right"
    }
  }
}

No notes defined.