HiVolda Styleguide

Banner: Countdown 

<div class="row widget-banner full-width center light-on-dark row-space-small overlay">
    <div class="inner-row">

        <div class="wg-body">

            <div class="banner " style="background-image: url(/images/banner-study-start.jpg)">
                <div class="inner-banner">
                    <h1>Husk søknadsfristen 15. april!</h1>
                    <div class="countdown">
                        <div class="time-block">
                            <span class="value">12</span>
                            <span class="definition">Dagar</span>
                        </div>
                        <div class="time-block">
                            <span class="value">03</span>
                            <span class="definition">Timar</span>
                        </div>
                        <div class="time-block">
                            <span class="value">34</span>
                            <span class="definition">Min</span>
                        </div>
                        <div class="time-block">
                            <span class="value">08</span>
                            <span class="definition">Sek</span>
                        </div>
                    </div>
                    <p class="button-group"><a href="http://testlenke.no" class="btn btn-primary">Finn studietilbodet ditt</a>
                        <a href="http://testlenke.no" class="btn btn-primary">Slik søkjer du</a>
                        <a href="http://testlenke.no" class="btn btn-primary">Møt våre tidlegare studentar</a>
                    </p>

                </div>
            </div>

        </div>

    </div>
</div>
 
{% include "@widget-top"%}
  {% render "@component-banner", banner, true %}
{% include "@widget-bottom"%}
 
{
  "wg_element": "div",
  "wg_class": "widget-banner full-width center light-on-dark row-space-small overlay",
  "banner": {
    "class": null,
    "text": "# Husk søknadsfristen 15. april!\n\n<div class=\"countdown\">\n  <div class=\"time-block\">\n    <span class=\"value\">12</span>\n    <span class=\"definition\">Dagar</span>\n  </div>\n  <div class=\"time-block\">\n    <span class=\"value\">03</span>\n    <span class=\"definition\">Timar</span>\n  </div>\n  <div class=\"time-block\">\n    <span class=\"value\">34</span>\n    <span class=\"definition\">Min</span>\n  </div>\n  <div class=\"time-block\">\n    <span class=\"value\">08</span>\n    <span class=\"definition\">Sek</span>\n  </div>\n</div>\n\n\n[Finn studietilbodet ditt](http://testlenke.no){.btn .btn-primary}\n[Slik søkjer du](http://testlenke.no){.btn .btn-primary} \n[Møt våre tidlegare studentar](http://testlenke.no){.btn .btn-primary} \n{.button-group}\n",
    "img": "/images/banner-study-start.jpg"
  }
}
Class Description
.full-width Set the banner to full width of browser window. Need to be added above .banner class.
.light-on-dark Set text to white instead of default black
.center Center align text