HAS Green Academy styleguide

Theming

1179 × 333 
<div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
    <h2>A section</h2>

    <p>Regular paragraph with <a href="#">a regular link</a>.</p>

    <p><button type="button" class="c-button      c-button--has-icon          ">
            <span class="c-button__inner">
                <span class="c-button__label  " data-module-bind="btn-label">
                    Button label
                </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>
        </button>
    </p>
</div>

<div class="t-themed-section">
    <div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
        <h2>Another section</h2>

        <p>Regular paragraph with <a href="#">a regular link</a> in a themed section.</p>

        <p><button type="button" class="c-button      c-button--has-icon          ">
                <span class="c-button__inner">
                    <span class="c-button__label  " data-module-bind="btn-label">
                        Button label
                    </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>
            </button>
        </p>
    </div>
</div>

<div class="t-page-theme-brand-b">

    <div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
        <h2>A section in a themed page: theme B</h2>

        <p>Regular paragraph with <a href="#">a regular link</a>.</p>

        <p><button type="button" class="c-button      c-button--has-icon          ">
                <span class="c-button__inner">
                    <span class="c-button__label  " data-module-bind="btn-label">
                        Button label
                    </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>
            </button>
        </p>
    </div>

    <div class="t-themed-section">
        <div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
            <h2>Another section in a themed (B) page</h2>

            <p>Regular paragraph with <a href="#">a regular link</a> in a themed section.</p>

            <p><button type="button" class="c-button      c-button--has-icon          ">
                    <span class="c-button__inner">
                        <span class="c-button__label  " data-module-bind="btn-label">
                            Button label
                        </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>
                </button>
            </p>
        </div>

    </div>

</div>
 
<div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
  <h2>A section</h2>

  <p>Regular paragraph with <a href="#">a regular link</a>.</p>

  <p>{{ render '@atoms-button' }}</p>
</div>

<div class="t-themed-section">
  <div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
    <h2>Another section</h2>

    <p>Regular paragraph with <a href="#">a regular link</a> in a themed section.</p>

    <p>{{ render '@atoms-button' }}</p>
  </div>
</div>

<div class="t-page-theme-brand-b">

  <div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
    <h2>A section in a themed page: theme B</h2>

    <p>Regular paragraph with <a href="#">a regular link</a>.</p>

    <p>{{ render '@atoms-button' }}</p>
  </div>

  <div class="t-themed-section">
    <div class="o-flow  o-flow--tiny  o-layer  o-layer--small">
      <h2>Another section in a themed (B) page</h2>

      <p>Regular paragraph with <a href="#">a regular link</a> in a themed section.</p>

      <p>{{ render '@atoms-button' }}</p>
    </div>

  </div>

</div>
 
/* No context defined. */

No notes defined.