HAS Green Academy styleguide

Summary Pricing

1179 × 333 
<article class="o-flow c-summary-pricing c-readable-text">
    <dl class="c-list-pricing">
        <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
            <dt>
                Aanvangsdatum
            </dt>

            <dd class="o-list-clean__item">
                <div class="c-list-pricing__value">
                    9 juni 2022
                </div>
                <div class="c-list-pricing__caption">

                </div>
            </dd>
        </div>
        <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
            <dt>
                Duur
            </dt>

            <dd class="o-list-clean__item">
                <div class="c-list-pricing__value">
                    3 maanden
                </div>
                <div class="c-list-pricing__caption">

                </div>
            </dd>
        </div>
        <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
            <dt>
                Investering
            </dt>

            <dd class="o-list-clean__item">
                <div class="c-list-pricing__value">
                    €&nbsp;1.414,00
                </div>
                <div class="c-list-pricing__caption">
                    excl.btw*
                </div>
            </dd>
        </div>
    </dl>

    <h4 class="u-h5">Prijsspecificaties</h4>
    <dl class="c-list-pricing">
        <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
            <dt>
                Aanvangsdatum
            </dt>

            <dd class="o-list-clean__item">
                <div class="c-list-pricing__value">
                    9 juni 2022
                </div>
                <div class="c-list-pricing__caption">

                </div>
            </dd>
        </div>
        <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
            <dt>
                Duur
            </dt>

            <dd class="o-list-clean__item">
                <div class="c-list-pricing__value">
                    3 maanden
                </div>
                <div class="c-list-pricing__caption">

                </div>
            </dd>
        </div>
        <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
            <dt>
                Investering
            </dt>

            <dd class="o-list-clean__item">
                <div class="c-list-pricing__value">
                    €&nbsp;1.414,00
                </div>
                <div class="c-list-pricing__caption">
                    excl.btw*
                </div>
            </dd>
        </div>
    </dl>

</article>
 
<article class="o-flow c-summary-pricing c-readable-text">
  {{ render '@atoms-list-pricing' }}
  <h4 class="u-h5">Prijsspecificaties</h4>
  {{ render '@atoms-list-pricing' }}
</article>
 
/* No context defined. */
  • Content: 
    /*  =========================================================================
    Components.Molecules.Pricing
    ========================================================================= */

/*  Block
    ========================================================================= */

.c-summary-pricing {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: var(--space-base);
}



/*  Elements
    ========================================================================= */




/*  Theming
    ========================================================================= */

.t-themed-section {
  .c-summary-pricing {
    background-color: var(--color-gray-light);
  }
}

.c-accordeon--branded .c-summary-pricing {
  --color-front: var(--color-black);
}
  • URL: /components/raw/molecules-summary-pricing/_summary-pricing.scss
  • Filesystem Path: src/components/molecules/summary-pricing/_summary-pricing.scss
  • Size: 781 Bytes

No notes defined.