@e-fellows/website-2022

Details-Box 

<div class="details-box">
    <dl class="details-box__items">
        <div class="details-box__item">
            <dt class="details-box__item-label">
                <span class="details-box__item-label-icon">
                    <svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
                    </svg> </span>

                <span class="details-box__item-label-text">Datum::
                </span>
            </dt>

            <dd class="details-box__item-text">
                <p class="paragraph">Fr, 12. Okt - Sa, 02. Sep</p>

            </dd>
        </div>
        <div class="details-box__item">
            <dt class="details-box__item-label">
                <span class="details-box__item-label-icon">
                    <svg class="icon icon--clock" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#clock"></use>
                    </svg> </span>

                <span class="details-box__item-label-text">Uhrzeit::
                </span>
            </dt>

            <dd class="details-box__item-text">
                <p class="paragraph">18:00 - 20:30 Uhr</p>

            </dd>
        </div>
        <div class="details-box__item">
            <dt class="details-box__item-label">
                <span class="details-box__item-label-icon">
                    <svg class="icon icon--marker" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#marker"></use>
                    </svg> </span>

                <span class="details-box__item-label-text">Ort::
                </span>
            </dt>

            <dd class="details-box__item-text">
                <p class="paragraph">Schloss Montabaur<br>Schlossweg 1<br>56410 Montabaur</p>
                <p class="paragraph"><strong><a class="link link--external" href="https://maps.google.com/" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--external-link" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#external-link"></use>
                                </svg>&#65279;</span><span class="link__text u-underline">Auf Google Maps anzeigen</span></a></strong></p>

            </dd>
        </div>
        <div class="details-box__item">
            <dt class="details-box__item-label">
                <span class="details-box__item-label-icon">
                    <svg class="icon icon--user-alt2" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#user-alt2"></use>
                    </svg> </span>

                <span class="details-box__item-label-text">Zielgruppe::
                </span>
            </dt>

            <dd class="details-box__item-text">
                <p class="paragraph">Alle Jurist:innen mit vollbefriedigendem Ersten Staatsexamen bzw. vollbefriedigendem staatlichen Teil der Ersten Juristischen Prüfung und Volljurist:innen.</p>

            </dd>
        </div>
        <div class="details-box__item">
            <dt class="details-box__item-label">
                <span class="details-box__item-label-icon">
                    <svg class="icon icon--hourglass" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#hourglass"></use>
                    </svg> </span>

                <span class="details-box__item-label-text">Bewerben bis::
                </span>
            </dt>

            <dd class="details-box__item-text">
                <p class="paragraph">03. September</p>

            </dd>
        </div>
    </dl>

    <div class="details-box__buttons">
        <div class="details-box__button">
            <a class="button u-underline" href="#">Jetzt Anmelden</a>
        </div>
        <div class="details-box__button">
            <a class="button button--outline u-underline" href="#">Jetzt Anmelden</a>
        </div>
    </div>
</div>
 
<div {{ html_attributes({
  id: id ?? false,
  class: 'details-box',
}, attrs ?? {}) }}>
  {% if items|default %}
    <dl class="details-box__items">
      {% for item in items %}
        <div class="details-box__item">
          <dt class="details-box__item-label">
            <span class="details-box__item-label-icon">
              {% include '@icon' with {
                icon: item.icon ??? 'arrow-right',
              } only %}
            </span>

            <span class="details-box__item-label-text">
              {{- item.label | nl2br | breakerize | make_efellows_non_breakable -}}:
            </span>
          </dt>

          <dd class="details-box__item-text">
            {{ item.text | componentize }}
          </dd>
        </div>
      {% endfor %}
    </dl>
  {% endif %}

  {% if buttons|default %}
    <div class="details-box__buttons">
      {% for button in buttons %}
        <div class="details-box__button">
          {% include button.use ?? '@button' with button | merge({
            outline: not loop.first,
          }) only %}
        </div>
      {% endfor %}
    </div>
  {% endif %}
</div>
 
{
  "items": [
    {
      "icon": "calendar-alt",
      "label": "Datum:",
      "text": "<p>Fr, 12. Okt - Sa, 02. Sep</p>\n"
    },
    {
      "icon": "clock",
      "label": "Uhrzeit:",
      "text": "<p>18:00 - 20:30 Uhr</p>\n"
    },
    {
      "icon": "marker",
      "label": "Ort:",
      "text": "<p>Schloss Montabaur<br/>Schlossweg 1<br/>56410 Montabaur</p>\n<p><strong><a href=\"https://maps.google.com/\">Auf Google Maps anzeigen</a></strong></p>\n"
    },
    {
      "icon": "user-alt2",
      "label": "Zielgruppe:",
      "text": "<p>Alle Jurist:innen mit vollbefriedigendem Ersten Staatsexamen bzw. vollbefriedigendem staatlichen Teil der Ersten Juristischen Prüfung und Volljurist:innen.</p>\n"
    },
    {
      "icon": "hourglass",
      "label": "Bewerben bis:",
      "text": "<p>03. September</p>\n"
    }
  ],
  "buttons": [
    {
      "link": "#",
      "text": "Jetzt Anmelden"
    },
    {
      "link": "#",
      "text": "Jetzt Anmelden"
    }
  ]
}
  • Content: 
    $details-box-breakpoint: 40rem;

:root {
  --details-box-background-color: var(--color-orange-light);
  --details-box-font-size: 1.6rem;
  --details-box-color: var(--text-color);
  --details-box-icon-color: var(--color-orange);
  --details-box-items-row-gap: 1em;
  --details-box-items-column-gap: 2rem;

  @include use-responsive-sizing(--details-box-padding-block, responsive-map(xs 2rem, xl 4rem));
  @include use-responsive-sizing(--details-box-padding-inline, responsive-map(xs 2rem, l 4rem));
}

.details-box {
  background-color: var(--details-box-background-color);
  color: var(--details-box-color);
  container-name: details-box;
  container-type: inline-size;
  font-size: var(--details-box-font-size);
  line-height: var(--line-height-body);
  padding-block: var(--details-box-padding-block);
  padding-inline: var(--details-box-padding-inline);
}

.details-box__items {
  display: grid;
  row-gap: var(--details-box-items-row-gap);
}

.details-box__item {
  column-gap: var(--details-box-items-column-gap);
  display: flex;
  flex-direction: column;
  row-gap: 0.2em;

  @container details-box (min-width: #{$details-box-breakpoint}) {
    flex-direction: row;
  }
}

.details-box__item-label {
  display: flex;
  flex-shrink: 0;
  gap: 0.8em;

  @container details-box (min-width: #{$details-box-breakpoint}) {
    inline-size: 33.33%;
    max-inline-size: 25rem;
  }
}

.details-box__item-label-icon {
  color: var(--details-box-icon-color);
  flex-shrink: 0;
  font-size: 1.2em;
  line-height: 1.1;
}

.details-box__item-label-text {
  font-weight: var(--font-weight-semibold);
}

.details-box__item-text {
  --bullet-list-indent: -0.5rem;

  padding-inline-start: 2em;

  * + * {
    margin-block-start: 0.5em;
  }

  @container details-box (min-width: #{$details-box-breakpoint}) {
    padding-inline-start: 0;
  }
}

.details-box__buttons {
  --button-width: 100%;
  --progress-button-width: 100%;

  display: grid;
  row-gap: 1.5em;

  &:not(:first-child) {
    margin-block-start: calc(var(--details-box-padding-block) * 1.5);
  }
}
  • URL: /components/raw/details-box/details-box.scss
  • Filesystem Path: src/components/2-molecules/details-box/details-box.scss
  • Size: 2.1 KB

No notes defined.