HiVolda Styleguide

Banner: Full Width 

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

        <div class="wg-body">

            <div class="banner " style="background-image: url(/images/info-page.jpg)">
                <div class="inner-banner">
                    <h1>Slik søker du barnehageplass</h1>

                </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",
  "banner": {
    "class": null,
    "text": "# Slik søker du barnehageplass\n"
  }
}
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