HAS Green Academy styleguide

Paragraph: In Branded

1179 × 333 
<section>
    <div class="o-retain o-retain--default t-themed-section">
        <div class="o-layer o-layer--large  ">
            <div class="t-color--light">
                <div class="o-flow">
                    <article class="o-flow  _c-editor _c-readable-text ">
                        <h2>Title paragraph</h2>
                        <p>Ik ben makelaar in koffi, en woon op de Lauriergracht No 37. Het is mijn gewoonte niet, romans te schrijven, of zulke dingen, en het heeft dan ook lang geduurd, voor ik er toe overging een paar riem papier extra te bestellen, en het werk aan te vangen, dat gij, lieve lezer, zoâven in de hand hebt genomen, en dat ge lezen moet als ge makelaar in koffie zijt, of als ge wat anders zijt.Niet alleen dat ik nooit iets schreef wat naar een roman geleek, maar ik houd er zelfs niet van, iets dergelijks te lezen, omdat ik een man van zaken ben.</p>
                        <ul>
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                        </ul>
                    </article>

                    <p><a class="c-button      c-button--has-icon          ">
                            <span class="c-button__inner">
                                <span class="c-button__label  " data-module-bind="btn-label">
                                    Kom sfeer proeven
                                </span>

                                <span class="c-button__wrap-icon">
                                    <svg class="c-icon    " aria-hidden="true">
                                        <use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
                                    </svg>

                                </span>

                            </span>
                        </a>
                    </p>

                </div>
            </div>
        </div>
    </div>
</section>
 
<section>
  <div class="o-retain o-retain--default {{#if inDark }}t-themed-section{{/if}}">
    <div class="o-layer o-layer--large  ">
      <div class="t-color--light">
        <div class="o-flow">
          {{# if imageNone }}
            {{ render '@molecules-editor' }}
            <p>{{> '@atoms-button' label='Kom sfeer proeven' icon='arrow-right' element='a' }}</p>
          {{/if}}

          {{# if image }}
              <div class="o-layout o-layout--gap-base">
                {{# if imageLeft }}
                    <div class="u-colspan-12 u-colspan-6@lap">
                      {{ render '@atoms-image' }}
                    </div>
                {{/if}}

                <div class="u-colspan-12 u-colspan-6@lap">
                  <div class="o-flow">
                    {{ render '@molecules-editor' }}
                    <p>{{> '@atoms-button' label='Kom sfeer proeven' icon='arrow-right' element='a' }}</p>
                  </div>
                </div>

                {{# if imageRight }}
                  <div class="u-colspan-12 u-colspan-6@lap">
                    {{ render '@atoms-image' }}
                  </div>
                {{/if}}
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</section>
 
{
  "imageNone": true,
  "image": false,
  "imageLeft": false,
  "imageRight": true,
  "inDark": true
}

No notes defined.