HAS Green Academy styleguide

Card: Default

1179 × 333 
<article class="c-card  t-bg--page-theme-dark  t-color--light  o-clickable  ">
    <picture>
        <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
    </picture>

    <div class="c-card__content">
        <div class="o-flow  o-flow--tiny">

            <h3 class="u-h4">
                <a href="#">
                    Card heading
                </a>

            </h3>

        </div>
    </div>
</article>
 
<article
  class="c-card  t-bg--page-theme-dark  t-color--light  {{# if href }}o-clickable{{/ if }}  {{# if
    hasModal }}o-clickable{{/ if }}">
  {{ render '@atoms-image--card' }}

  {{# if hasModal }}
  <details-modal controls="dialog-location-{{ index }}">
    <dialog class="c-modal" id="dialog-location-{{ index }}">
      <header class="c-modal__header">
        <div class="o-layout  o-layout--fit  o-layout--justify">
          <h3>{{ heading }}</h3>
          <button
            type="button"
            class="o-button-clean"
            data-modal-close
            aria-controls="dialog-location-{{ index }}"
          >
            <span class="u-visually-hidden">Sluiten</span>
            {{> '@atoms-icon' icon='close' }}
          </button>
        </div>

      </header>
      <main class="c-modal__content">
        <p>Some content about this location. {{ index }}</p>
      </main>
    </dialog>
  {{/if}}

  <div class="c-card__content">
    <div class="o-flow  o-flow--tiny">

      {{# if label }}
        <span class="c-card__label">{{ label }}</span>
      {{/if}}

      <h3 class="u-h4">
        {{# if href }}
          <a href="#">
            {{ heading }}
          </a>
        {{ else if hasModal }}
          <button
            type="button"
            class="o-button-clean  o-clickable__element"
            aria-controls="dialog-location-{{ index }}"
          >
            {{ heading }}
          </button>
        {{ else }}
          {{ heading }}
        {{/ if }}

      </h3>

      {{# if subheading }}
        <p class="c-card__subheading">{{ subheading }}</p>
      {{/if}}

      {{# if datetime }}
        <dl class="o-layout  o-layout--gap-small  o-layout--fit">

          <div class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--align-block-center">
            <dt>
              <span class="u-visually-hidden">Datum</span>
              {{> '@atoms-icon' icon='calendar' }}
            </dt>
            <dd>
              <time datetime="2022-06-01">1 juni 2022</time>
            </dd>
          </div>

          <div class="o-layout  o-layout--fit  o-layout--gap-tiny">
            <dt>
              <span class="u-visually-hidden">Tijd</span>
              {{> '@atoms-icon' icon='clock' }}
            </dt>
            <dd>
              <time datetime="18:00">18:00</time>
            </dd>
          </div>
        </dl>
      {{/if}}

      {{# if isLocation }}
        <p>Open dag:
          <time datetime="2022-06-01">1 juni 2022</time>
          <br>
          Meelopen:
          <time datetime="2022-06-2022">3 juni 2022</time>
        </p>

        <p>
          {{> '@atoms-button' element='span' modifier='flat' label='Locatie' icon='arrow-right' }}
        </p>
      {{/if}}

      {{#if listLinksIcons }}
        <dl class="o-flow  o-flow--tiny">
          {{# each listLinksIcons }}
            <div class="o-layout  o-layout--gap-tiny  o-layout--fit  o-layout--align-block-center">
              <dt title="{{ label }}">
                <span class="u-visually-hidden">{{ label }}</span>
                {{> '@atoms-icon' icon=icon }}
              </dt>

              <dd>
                <a href="{{ href }}">
                  {{ value }}
                </a>
              </dd>
            </div>
          {{/each}}
        </dl>
      {{/if}}

      {{# if courseMeta }}
        <div class="c-card__subheading">
          <dl>
            {{# each courseMeta.items }}
              <div title="{{ dt }}" class="c-card__meta-list-item">
                <dt class="u-visually-hidden">{{ dt }}</dt>
                <dd>{{ dd }}</dd>
              </div>
            {{/each}}
          </dl>
        </div>
      {{/ if }}

      {{# if intro }}
        <p>{{ intro }}</p>
      {{/if}}
    </div>
  </div>
  {{# if hasModal }}
    </details-modal>
  {{/if}}
</article>
 
{
  "heading": "Card heading",
  "href": "#"
}
  • Content: 
    /*  Components.Molecules.Card
    ========================================================================= */

@use 'node_modules/@supple-kit/supple-css/tools/typography';
@use 'src/_sass/vars';

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

.c-card {
  // set by class, responds globally
  block-size: 100%;
}



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

.c-card__content {
  padding: var(--space-base);
}

.c-card__subheading {
  @include typography.font-size(vars.$milli);
  opacity: 0.64;
  margin-block-end: var(--space-small);
}

.c-card__content--number {
  padding: var(--space-large);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  @include typography.font-size(vars.$foxtrot);
}

.c-card__label {
  border: 1px solid var(--color-white);
  border-radius: var(--space-base);
  padding-inline: var(--space-tiny);
  @include typography.font-size(vars.$milli);
}

.c-card__big-text {
  color: var(--color-white);
}

.c-card__small-text {
  color: var(--color-white-40);
}

.c-card__meta-list-item {
  display: inline-flex;
  gap: var(--space-tiny);

  dd {
    margin-inline-start: 0;
  }

  &:not(:first-of-type) {
    &::before {
      content: '•';
    }
  }
}
  • URL: /components/raw/molecules-card/_card.scss
  • Filesystem Path: src/components/molecules/card/_card.scss
  • Size: 1.3 KB

No notes defined.