@e-fellows/website-2022

Persönliche Filter 

<div class="personal-filters">
    <div class="personal-filters__alert">
        <div class="icon-with-text">
            <svg class="icon icon--info-alt icon-with-text__icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#info-alt"></use>
            </svg>
            <div class="icon-with-text__text">
                <p class="paragraph">Diese Angaben übernehmen wir aus Deinem CV um Dir Inhalte anzuzeigen, die zu Dir passen.
                </p>
            </div>
        </div>
    </div>

    <dl class="personal-filters__filters">
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Studienfach:</dt>

            <dd class="personal-filters__filter-value">Jura</dd>
        </div>
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Studienphase:</dt>

            <dd class="personal-filters__filter-value">LL.M.</dd>
        </div>
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Studienende:</dt>

            <dd class="personal-filters__filter-value">09 / 2023</dd>
        </div>
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Geschlecht:</dt>

            <dd class="personal-filters__filter-value">männlich</dd>
        </div>
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Mitgliedsstatus:</dt>

            <dd class="personal-filters__filter-value">Mitglied</dd>
        </div>
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Auf Jobsuche:</dt>

            <dd class="personal-filters__filter-value">Ja</dd>
        </div>
        <div class="personal-filters__filter">
            <dt class="personal-filters__filter-label">Suche Masterplatz:</dt>

            <dd class="personal-filters__filter-value">Ja</dd>
        </div>
    </dl>

    <div class="personal-filters__text"><a class="link link--internal" href="#"><span class="link__text u-underline">Bearbeite Deinen CV</span></a> um diese Angaben zu ändern.
    </div>
</div>
 
<div {{ html_attributes({
  id: id ?? false,
  class: 'personal-filters',
}, attrs ?? {}) }}>
  {% if alert|default %}
    <div class="personal-filters__alert">
      {% include '@icon-with-text' with {
        icon: 'info-alt',
      } | merge(alert) only %}
    </div>
  {% endif %}

  <dl class="personal-filters__filters">
    {% for filter in filters %}
      <div class="personal-filters__filter">
        <dt class="personal-filters__filter-label">
          {{- filter.label -}}
        </dt>

        <dd class="personal-filters__filter-value">
          {{- filter.value -}}
        </dd>
      </div>
    {% endfor %}
  </dl>

  {% if text|default %}
    <div class="personal-filters__text">
      {{- text | componentize -}}
    </div>
  {% endif %}
</div>
 
{
  "alert": {
    "text": "<p>Diese Angaben übernehmen wir aus Deinem CV um Dir Inhalte anzuzeigen, die zu Dir passen.\n"
  },
  "filters": [
    {
      "label": "Studienfach:",
      "value": "Jura"
    },
    {
      "label": "Studienphase:",
      "value": "LL.M."
    },
    {
      "label": "Studienende:",
      "value": "09 / 2023"
    },
    {
      "label": "Geschlecht:",
      "value": "männlich"
    },
    {
      "label": "Mitgliedsstatus:",
      "value": "Mitglied"
    },
    {
      "label": "Auf Jobsuche:",
      "value": "Ja"
    },
    {
      "label": "Suche Masterplatz:",
      "value": "Ja"
    }
  ],
  "text": "<a href=\"#\">Bearbeite Deinen CV</a> um diese Angaben zu ändern.\n"
}
  • Content: 
    :root {
  --personal-filters-line-color: var(--color-grey-light);
  --personal-filters-alert-icon-color: var(--color-orange);
  --personal-filters-alert-outline: var(--color-orange);
}

.personal-filters {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.personal-filters__alert {
  --icon-with-text-icon-color: var(--personal-filters-alert-icon-color);

  border: 2px solid var(--personal-filters-alert-outline);
  font-size: 1.4rem;
  padding: 1.5rem;
}

.personal-filters__filters {
  display: grid;
  gap: 1.5rem;
  line-height: var(--line-height-body);
}

.personal-filters__filter {
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.75fr 1.25fr;
}

.personal-filters__filter-label {
  hyphens: auto;
}

.personal-filters__filter-value {
  font-weight: var(--font-weight-semibold);
  hyphens: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-filters__text {
  border-block-start: 2px solid var(--personal-filters-line-color);
  line-height: var(--line-height-body);
  padding-block-start: 3rem;
  position: relative;

  > * + * {
    margin-block-start: 1.5rem;
  }
}
  • URL: /components/raw/personal-filters/personal-filters.scss
  • Filesystem Path: src/components/2-molecules/personal-filters/personal-filters.scss
  • Size: 1.1 KB

No notes defined.