HAS Green Academy styleguide

Accordeon

1179 × 333 
<div class="c-accordeon  ">
    <details class="c-accordeon__item">
        <summary class="c-accordeon__summary">
            <span class="o-layout  o-layout--gap-tiny  o-layout--fit  o-layout--justify  o-layout--nowrap">
                <span>
                    <span class="u-heading  u-h4">Accordeon item 1</span>
                </span>
                <span>
                    <span class="c-accordeon__plus">
                        <svg class="c-icon    " aria-hidden="true">
                            <use xlink:href="../../dist/sprite.svg#icon-plus" />
                        </svg>

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

                    </span>
                </span>
            </span>
        </summary>

        <div class="c-accordeon__content">
            <div class="o-flow">
                <div class="o-layout o-layout--gap-base">
                    <div class="u-colspan-12 u-colspan-8@lap">
                        <div class="o-flow c-editor c-readable-text">
                            <h3 class="u-h5">Kennismaking en brede basis </h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
                            <a class="c-button  c-button--small    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>
                        </div>
                    </div>
                    <div class="u-colspan-12 u-colspan-4@lap">
                        <picture>
                            <img class="c-img  lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" width="600" height="400">
                        </picture>
                    </div>
                </div>
                <div class="o-flow c-editor c-readable-text">
                    <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>
                </div>
            </div>
        </div>
    </details>
    <details class="c-accordeon__item">
        <summary class="c-accordeon__summary">
            <span class="o-layout  o-layout--gap-tiny  o-layout--fit  o-layout--justify  o-layout--nowrap">
                <span>
                    <span class="u-heading  u-h4">Accordeon item 2</span>
                </span>
                <span>
                    <span class="c-accordeon__plus">
                        <svg class="c-icon    " aria-hidden="true">
                            <use xlink:href="../../dist/sprite.svg#icon-plus" />
                        </svg>

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

                    </span>
                </span>
            </span>
        </summary>

        <div class="c-accordeon__content">
            <div class="o-flow">
                <div class="o-layout o-layout--gap-base">
                    <div class="u-colspan-12 u-colspan-8@lap">
                        <div class="o-flow c-editor c-readable-text">
                            <h3 class="u-h5">Kennismaking en brede basis </h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
                            <a class="c-button  c-button--small    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>
                        </div>
                    </div>
                    <div class="u-colspan-12 u-colspan-4@lap">
                        <picture>
                            <img class="c-img  lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" width="600" height="400">
                        </picture>
                    </div>
                </div>
            </div>
        </div>
    </details>
    <details class="c-accordeon__item">
        <summary class="c-accordeon__summary">
            <span class="o-layout  o-layout--gap-tiny  o-layout--fit  o-layout--justify  o-layout--nowrap">
                <span>
                    <span class="u-heading  u-h4">Accordeon item 3</span>
                </span>
                <span>
                    <span class="c-accordeon__plus">
                        <svg class="c-icon    " aria-hidden="true">
                            <use xlink:href="../../dist/sprite.svg#icon-plus" />
                        </svg>

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

                    </span>
                </span>
            </span>
        </summary>

        <div class="c-accordeon__content">
            <div class="o-flow">
                <div class="o-layout o-layout--gap-base">
                    <div class="u-colspan-12 u-colspan-8@lap">
                        <div class="o-flow c-editor c-readable-text">
                            <h3 class="u-h5">Kennismaking en brede basis </h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
                            <a class="c-button  c-button--small    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>
                        </div>
                    </div>
                    <div class="u-colspan-12 u-colspan-4@lap">
                        <picture>
                            <img class="c-img  lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" width="600" height="400">
                        </picture>
                    </div>
                </div>
            </div>
        </div>
    </details>
</div>
 
<div class="c-accordeon  {{#if isBranded }}c-accordeon--branded{{/if}}">
  {{#each items }}
    <details class="c-accordeon__item">
      <summary class="c-accordeon__summary">
        <span class="o-layout  o-layout--gap-tiny  o-layout--fit  o-layout--justify  o-layout--nowrap">
          <span>
            <span class="u-heading  u-h4">{{ summary }}</span>
          </span>
          <span>
            <span class="c-accordeon__plus">
              {{> '@atoms-icon' icon='plus' }}
            </span>
            <span class="c-accordeon__minus">
              {{> '@atoms-icon' icon='minus' }}
            </span>
          </span>
        </span>
      </summary>

      <div class="c-accordeon__content">
        <div class="o-flow">
          <div class="o-layout o-layout--gap-base">
            <div class="u-colspan-12 u-colspan-8@lap">
              <div class="o-flow c-editor c-readable-text">
                <h3 class="u-h5">{{ detailsHeading }} </h3>
                {{{ details }}}
                {{> '@atoms-button' label='Kom sfeer proeven' modifier='small' icon='arrow-right' element='a' }}
              </div>
            </div>
            <div class="u-colspan-12 u-colspan-4@lap">
              <picture>
                <img class="c-img  lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" width="600" height="400">
              </picture>
            </div>
          </div>
          {{# if hasPricingTable }}
            <div class="o-flow c-editor c-readable-text">
              {{ render '@molecules-summary-pricing' }}
            </div>
          {{/if}}
        </div>
      </div>
    </details>
  {{/each}}
</div>
 
{
  "items": [
    {
      "summary": "Accordeon item 1",
      "details": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>",
      "hasPricingTable": true,
      "detailsHeading": "Kennismaking en brede basis"
    },
    {
      "summary": "Accordeon item 2",
      "detailsHeading": "Kennismaking en brede basis",
      "details": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>"
    },
    {
      "summary": "Accordeon item 3",
      "detailsHeading": "Kennismaking en brede basis",
      "details": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>"
    }
  ]
}
  • Content: 
    /*  =========================================================================
    Components.Molecules.Accordeon
    ========================================================================= */

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

.c-accordeon {
  --summary-color: var(--page-theme-dark);
  --background-color: var(--color-gray-light);
  --separator-color: var(--color-white);
  background-color: var(--background-color);
}



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

.c-accordeon__minus {
  display: none;
}

.c-accordeon__item {
  &:not(:last-child) {
    border-block-end: 1px solid var(--separator-color);
  }

  &[open] {
    .c-accordeon__plus {
      display: none;
    }

    .c-accordeon__minus {
      display: block;
    }
  }
}

.c-accordeon__summary {
  --color-front: var(--summary-color);
  list-style: none;
  cursor: pointer;
  padding: var(--space-base);
  color: var(--summary-color);

  &::-webkit-details-marker {
    display: none;
  }
}

.c-accordeon__content {
  padding-block: 0 var(--space-base);
  padding-inline: var(--space-base);
  color: var(--color-front);
}



/*  Modifier
    ========================================================================= */

/* only dark accordeon NOT inside a themed section is dark */
.c-accordeon--branded:not(:where(.t-themed-section *)) {
  --background-color: var(--page-theme-dark);
  --summary-color: var(--color-white);
  --color-front: var(--color-white);
}



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

.t-themed-section {
  .c-accordeon {
    --background-color: var(--color-white);
    --separator-color: var(--color-gray-light);
    --color-front: var(--color-black);
  }
}
  • URL: /components/raw/molecules-accordeon/_accordeon.scss
  • Filesystem Path: src/components/molecules/accordeon/_accordeon.scss
  • Size: 1.8 KB

No notes defined.