HAS Green Academy styleguide

List Pricing

1179 × 333 
<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>
 
<dl class="c-list-pricing">
  {{# each items }}
    <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--justify  c-list-pricing__item">
      <dt>
        {{ label }}
      </dt>

      <dd class="o-list-clean__item">
        <div class="c-list-pricing__value">
          {{{ value }}}
        </div>
        <div class="c-list-pricing__caption">
          {{ caption }}
        </div>
      </dd>
    </div>
  {{/each}}
</dl>
 
{
  "items": [
    {
      "label": "Aanvangsdatum",
      "value": "9 juni 2022"
    },
    {
      "label": "Duur",
      "value": "3 maanden"
    },
    {
      "label": "Investering",
      "value": "€&nbsp;1.414,00",
      "caption": "excl.btw*"
    }
  ]
}
  • Content: 
    /*  =========================================================================
    Components.List-pricing
    ========================================================================= */

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

.c-list-pricing {
  color: var(--color-black);
}



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

.c-list-pricing__item {
  padding-block: var(--space-tiny);

  &:not(:first-of-type) {
    border-block-start: 1px var(--color-gray-medium) dashed;
  }
}

.c-list-pricing__value {
  font-weight: var(--font-weight-bold);
  text-align: end;
}

.c-list-pricing__caption {
  font-size: var(--size-normalis);
  text-align: end;
  color: var(--color-gray-dark);
}
  • URL: /components/raw/atoms-list-pricing/_list-pricing.scss
  • Filesystem Path: src/components/atoms/lists/list-pricing/_list-pricing.scss
  • Size: 785 Bytes

No notes defined.