@e-fellows/website-2022

Vergleich 

<div class="compare">

    <div class="compare__inner">
        <div class="compare__headline">
            <h2 class="headline headline--1"><span class="headline__text">Unsere Leistungen, Ihre Vorteile</span></h2>
        </div>

        <div class="compare__sections">
            <div class="compare__section">
                <div class="compare__package">

                    <div class="compare__package-headline">
                        <span class="headline headline--2"><span class="headline__kicker">Sparpaket<span class="u-hidden-visually">: </span></span><span class="headline__text">5.000 €</span></span>
                    </div>
                </div>

                <ul class="compare__section-items">

                    <li class="compare__section-item">
                        <svg id="icon-18480-57654" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-18480-57654-title&quot;:&quot;Ja&quot;,&quot;icon-18480-57654-description&quot;:false}">
                            <title id="icon-18480-57654-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Teilnahme an Vorstellungsrunde und Standfläche</span>
                    </li>
                    <li class="compare__section-item">
                        <svg id="icon-37331-16647" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-37331-16647-title&quot;:&quot;Ja&quot;,&quot;icon-37331-16647-description&quot;:false}">
                            <title id="icon-37331-16647-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Zugriff auf CVs und Vorauswahl Ihrer Kandidat:innen für Einzelgespräche</span>
                    </li>
                    <li class="compare__section-item">
                        <svg id="icon-41378-24764" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-41378-24764-title&quot;:&quot;Ja&quot;,&quot;icon-41378-24764-description&quot;:false}">
                            <title id="icon-41378-24764-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Employer Branding im Rahmen des Veranstaltungsmarketings</span>
                    </li>
                    <li class="compare__section-item">
                        <span class="compare__number">6</span>

                        <span class="compare__section-item-text">Einzelgespräche</span>
                    </li>
                </ul>

                <div class="compare__section-footer">
                    6.500 €
                </div>
            </div>
            <div class="compare__section">
                <div class="compare__package">

                    <div class="compare__package-headline">
                        <span class="headline headline--2"><span class="headline__kicker">Standardpaket<span class="u-hidden-visually">: </span></span><span class="headline__text">6.500 €</span></span>
                    </div>
                </div>

                <ul class="compare__section-items">

                    <li class="compare__section-item">
                        <svg id="icon-60704-37935" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-60704-37935-title&quot;:&quot;Ja&quot;,&quot;icon-60704-37935-description&quot;:false}">
                            <title id="icon-60704-37935-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Teilnahme an Vorstellungsrunde und Standfläche</span>
                    </li>
                    <li class="compare__section-item">
                        <svg id="icon-90472-51763" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-90472-51763-title&quot;:&quot;Ja&quot;,&quot;icon-90472-51763-description&quot;:false}">
                            <title id="icon-90472-51763-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Zugriff auf CVs und Vorauswahl Ihrer Kandidat:innen für Einzelgespräche</span>
                    </li>
                    <li class="compare__section-item">
                        <svg id="icon-87004-20502" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-87004-20502-title&quot;:&quot;Ja&quot;,&quot;icon-87004-20502-description&quot;:false}">
                            <title id="icon-87004-20502-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Employer Branding im Rahmen des Veranstaltungsmarketings</span>
                    </li>
                    <li class="compare__section-item">
                        <span class="compare__number">6</span>

                        <span class="compare__section-item-text">Einzelgespräche</span>
                    </li>
                    <li class="compare__section-item">
                        <span class="compare__number">1</span>

                        <span class="compare__section-item-text">Stellenanzeigen (8 Wochen Laufzeit zum Veranstaltungstermin</span>
                    </li>
                </ul>

                <div class="compare__section-footer">
                    6.500 €
                </div>
            </div>
            <div class="compare__section">
                <div class="compare__package">
                    <svg class="icon icon--medal compare__package-icon" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#medal"></use>
                    </svg>
                    <div class="compare__package-headline">
                        <span class="headline headline--2"><span class="headline__kicker">Premiumpaket<span class="u-hidden-visually">: </span></span><span class="headline__text">7.000 €</span></span>
                    </div>
                </div>

                <ul class="compare__section-items">

                    <li class="compare__section-item">
                        <svg id="icon-58445-94263" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-58445-94263-title&quot;:&quot;Ja&quot;,&quot;icon-58445-94263-description&quot;:false}">
                            <title id="icon-58445-94263-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Teilnahme an Vorstellungsrunde und Standfläche</span>
                    </li>
                    <li class="compare__section-item">
                        <svg id="icon-59826-91771" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-59826-91771-title&quot;:&quot;Ja&quot;,&quot;icon-59826-91771-description&quot;:false}">
                            <title id="icon-59826-91771-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Zugriff auf CVs und Vorauswahl Ihrer Kandidat:innen für Einzelgespräche</span>
                    </li>
                    <li class="compare__section-item">
                        <svg id="icon-38801-85604" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-38801-85604-title&quot;:&quot;Ja&quot;,&quot;icon-38801-85604-description&quot;:false}">
                            <title id="icon-38801-85604-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>

                        <span class="compare__section-item-text">Employer Branding im Rahmen des Veranstaltungsmarketings</span>
                    </li>
                    <li class="compare__section-item">
                        <span class="compare__number">12</span>

                        <span class="compare__section-item-text">Einzelgespräche</span>
                    </li>
                    <li class="compare__section-item">
                        <span class="compare__number">4</span>

                        <span class="compare__section-item-text">Stellenanzeigen (8 Wochen Laufzeit zum Veranstaltungstermin</span>
                    </li>
                    <li class="compare__section-item">
                        <span class="compare__number">1</span>

                        <span class="compare__section-item-text">Eintrag im Jobletter an bis zu 150.000 Empfänger:innen</span>
                    </li>
                </ul>

                <div class="compare__section-footer">
                    7.000 €
                </div>
            </div>
        </div>

        <table class="compare__table">
            <thead class="compare__table-head">
                <tr class="compare__table-row">
                    <td></td>

                    <th class="compare__table-cell" scope="colspan">
                        <div class="compare__package">

                            <div class="compare__package-headline">
                                <span class="headline headline--2"><span class="headline__kicker">Sparpaket<span class="u-hidden-visually">: </span></span><span class="headline__text">5.000 €</span></span>
                            </div>
                        </div>

                    </th>
                    <th class="compare__table-cell" scope="colspan">
                        <div class="compare__package">

                            <div class="compare__package-headline">
                                <span class="headline headline--2"><span class="headline__kicker">Standardpaket<span class="u-hidden-visually">: </span></span><span class="headline__text">6.500 €</span></span>
                            </div>
                        </div>

                    </th>
                    <th class="compare__table-cell" scope="colspan">
                        <div class="compare__package">
                            <svg class="icon icon--medal compare__package-icon" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#medal"></use>
                            </svg>
                            <div class="compare__package-headline">
                                <span class="headline headline--2"><span class="headline__kicker">Premiumpaket<span class="u-hidden-visually">: </span></span><span class="headline__text">7.000 €</span></span>
                            </div>
                        </div>

                    </th>
                </tr>
            </thead>

            <tbody class="compare__table-body">

                <tr class="compare__table-row">
                    <th class="compare__table-cell" scope="rowspan">Teilnahme an Vorstellungsrunde und Standfläche</th>

                    <td class="compare__table-cell">
                        <svg id="icon-90787-26482" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-90787-26482-title&quot;:&quot;Ja&quot;,&quot;icon-90787-26482-description&quot;:false}">
                            <title id="icon-90787-26482-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-57326-47742" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-57326-47742-title&quot;:&quot;Ja&quot;,&quot;icon-57326-47742-description&quot;:false}">
                            <title id="icon-57326-47742-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-80412-93197" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-80412-93197-title&quot;:&quot;Ja&quot;,&quot;icon-80412-93197-description&quot;:false}">
                            <title id="icon-80412-93197-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                </tr>
                <tr class="compare__table-row">
                    <th class="compare__table-cell" scope="rowspan">Zugriff auf CVs und Vorauswahl Ihrer Kandidat:innen für Einzelgespräche</th>

                    <td class="compare__table-cell">
                        <svg id="icon-61579-43473" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-61579-43473-title&quot;:&quot;Ja&quot;,&quot;icon-61579-43473-description&quot;:false}">
                            <title id="icon-61579-43473-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-69453-78315" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-69453-78315-title&quot;:&quot;Ja&quot;,&quot;icon-69453-78315-description&quot;:false}">
                            <title id="icon-69453-78315-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-79808-35509" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-79808-35509-title&quot;:&quot;Ja&quot;,&quot;icon-79808-35509-description&quot;:false}">
                            <title id="icon-79808-35509-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                </tr>
                <tr class="compare__table-row">
                    <th class="compare__table-cell" scope="rowspan">Employer Branding im Rahmen des Veranstaltungsmarketings</th>

                    <td class="compare__table-cell">
                        <svg id="icon-97655-16560" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-97655-16560-title&quot;:&quot;Ja&quot;,&quot;icon-97655-16560-description&quot;:false}">
                            <title id="icon-97655-16560-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-74999-89758" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-74999-89758-title&quot;:&quot;Ja&quot;,&quot;icon-74999-89758-description&quot;:false}">
                            <title id="icon-74999-89758-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-58692-74900" class="icon icon--check-list compare__yes" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-58692-74900-title&quot;:&quot;Ja&quot;,&quot;icon-58692-74900-description&quot;:false}">
                            <title id="icon-58692-74900-title">Ja</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-list"></use>
                        </svg>
                    </td>
                </tr>
                <tr class="compare__table-row">
                    <th class="compare__table-cell" scope="rowspan">Einzelgespräche</th>

                    <td class="compare__table-cell">
                        <span class="compare__number">6</span>
                    </td>
                    <td class="compare__table-cell">
                        <span class="compare__number">6</span>
                    </td>
                    <td class="compare__table-cell">
                        <span class="compare__number">12</span>
                    </td>
                </tr>
                <tr class="compare__table-row">
                    <th class="compare__table-cell" scope="rowspan">Stellenanzeigen (8 Wochen Laufzeit zum Veranstaltungstermin</th>

                    <td class="compare__table-cell">
                        <svg id="icon-57505-68158" class="icon icon--cross-alt compare__no" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-57505-68158-title&quot;:&quot;Nein&quot;,&quot;icon-57505-68158-description&quot;:false}">
                            <title id="icon-57505-68158-title">Nein</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross-alt"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <span class="compare__number">1</span>
                    </td>
                    <td class="compare__table-cell">
                        <span class="compare__number">4</span>
                    </td>
                </tr>
                <tr class="compare__table-row">
                    <th class="compare__table-cell" scope="rowspan">Eintrag im Jobletter an bis zu 150.000 Empfänger:innen</th>

                    <td class="compare__table-cell">
                        <svg id="icon-74378-80138" class="icon icon--cross-alt compare__no" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-74378-80138-title&quot;:&quot;Nein&quot;,&quot;icon-74378-80138-description&quot;:false}">
                            <title id="icon-74378-80138-title">Nein</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross-alt"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <svg id="icon-32986-59240" class="icon icon--cross-alt compare__no" viewBox="0 0 200 200" role="img" aria-labelledby="{&quot;icon-32986-59240-title&quot;:&quot;Nein&quot;,&quot;icon-32986-59240-description&quot;:false}">
                            <title id="icon-32986-59240-title">Nein</title>
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross-alt"></use>
                        </svg>
                    </td>
                    <td class="compare__table-cell">
                        <span class="compare__number">1</span>
                    </td>
                </tr>
            </tbody>

            <tfoot class="compare__table-foot">
                <tr class="compare__table-row">
                    <td class="compare__table-cell"></td>

                    <td class="compare__table-cell">
                        6.500 €
                    </td>
                    <td class="compare__table-cell">
                        6.500 €
                    </td>
                    <td class="compare__table-cell">
                        7.000 €
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="compare__button">
        <a class="icon-button" href="#">
            <span class="icon-button__icon">
                <svg class="icon icon--download" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#download"></use>
                </svg> </span>

            <span class="icon-button__text u-underline">Unterlagen herunterladen (PDF 1,2 Mb)</span>

        </a>
    </div>
</div>
 
{% set yesValue = (yesValue ??? 'yes') | lower %}
{% set noValue = (noValue ??? 'no') | lower %}
{% set level = level ??? 2 -%}

<div {{ html_attributes({
  id: id ?? false,
  class: 'compare',
}, attrs ?? {}) }}>
  {% macro package(package) %}
    <div class="compare__package">
      {% if package.icon|default %}
        {% include '@icon' with {
          class: 'compare__package-icon',
          icon: package.icon,
        } %}
      {% endif %}

      <div class="compare__package-headline">
        {% include '@headline' with {
          text: package.text,
          kicker: package.kicker ?? false,
          level: 2,
          size: 2,
          tag: 'span',
        } only %}
      </div>
    </div>
  {% endmacro %}

  {% macro packageContent(value, yesValue, noValue) %}
    {% switch value | lower %}
      {%- case yesValue %}
        {% include '@icon' with {
          class: 'compare__yes',
          icon: 'check-list',
          title: 'Yes' | t('site'),
        } %}

      {%- case noValue %}
        {% include '@icon' with {
          class: 'compare__no',
          icon: 'cross-alt',
          title: 'No' | t('site'),
        } %}

      {%- default %}
        <span class="compare__number">
          {{- value -}}
        </span>
    {%- endswitch -%}
  {% endmacro %}

  <div class="compare__inner">
    {% if headline|default %}
      <div class="compare__headline">
        {% include '@headline' with headline | merge({
          level: level,
          size: 1,
        }) only %}
      </div>
    {% endif %}

    <div class="compare__sections">
      {% for package in packages %}
        <div class="compare__section">
          {{ _self.package(package) }}

          <ul class="compare__section-items">
            {% set packageContents = contents | map(content => {
              text: content.text,
              value: content.packages | filter(p => p.id == package.id) | map(p => p.value) | first | default(noValue),
            }) %}

            {% for packageContent in packageContents | filter(packageContent => packageContent.value != noValue) %}
              <li class="compare__section-item">
                {{ _self.packageContent(packageContent.value, yesValue, noValue) }}

                <span class="compare__section-item-text">
                  {{- packageContent.text -}}
                </span>
              </li>
            {% endfor %}
          </ul>

          {% if package.lastLine|default %}
            <div class="compare__section-footer">
              {{ package.lastLine }}
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>

    <table class="compare__table">
      <thead class="compare__table-head">
        <tr class="compare__table-row">
          <td></td>

          {% for package in packages %}
            <th class="compare__table-cell" scope="colspan">
              {{ _self.package(package) }}
            </th>
          {% endfor %}
        </tr>
      </thead>

      <tbody class="compare__table-body">
        {% set packageKeys = packages | map(column => column.id) %}

        {% for content in contents %}
          <tr class="compare__table-row">
            <th class="compare__table-cell" scope="rowspan">
              {{- content.text -}}
            </th>

            {% for packageKey in packageKeys %}
              <td class="compare__table-cell">
                {{ _self.packageContent(
                  content.packages | filter(p => p.id == packageKey) | map(p => p.value) | first | default(noValue),
                  yesValue,
                  noValue
                ) }}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>

      {% if packages|filter(column => column.lastLine|default)|length > 0 %}
        <tfoot class="compare__table-foot">
          <tr class="compare__table-row">
            <td class="compare__table-cell"></td>

            {% for package in packages %}
              <td class="compare__table-cell">
                {{ package.lastLine|default }}
              </td>
            {% endfor %}
          </tr>
        </tfoot>
      {% endif %}
    </table>
  </div>

  {% if button|default %}
    <div class="compare__button">
      {% include '@icon-button' with button only %}
    </div>
  {% endif %}
</div>
 
{
  "headline": {
    "text": "Unsere Leistungen, Ihre Vorteile"
  },
  "packages": [
    {
      "id": "sparpaket",
      "kicker": "Sparpaket",
      "text": "5.000 €",
      "lastLine": "6.500 €"
    },
    {
      "id": "standardpaket",
      "kicker": "Standardpaket",
      "text": "6.500 €",
      "lastLine": "6.500 €"
    },
    {
      "id": "premiumpaket",
      "icon": "medal",
      "kicker": "Premiumpaket",
      "text": "7.000 €",
      "lastLine": "7.000 €"
    }
  ],
  "contents": [
    {
      "text": "Teilnahme an Vorstellungsrunde und Standfläche",
      "packages": [
        {
          "id": "sparpaket",
          "value": "yes"
        },
        {
          "id": "standardpaket",
          "value": "yes"
        },
        {
          "id": "premiumpaket",
          "value": "yes"
        }
      ]
    },
    {
      "text": "Zugriff auf CVs und Vorauswahl Ihrer Kandidat:innen für Einzelgespräche",
      "packages": [
        {
          "id": "sparpaket",
          "value": "yes"
        },
        {
          "id": "standardpaket",
          "value": "yes"
        },
        {
          "id": "premiumpaket",
          "value": "yes"
        }
      ]
    },
    {
      "text": "Employer Branding im Rahmen des Veranstaltungsmarketings",
      "packages": [
        {
          "id": "sparpaket",
          "value": "yes"
        },
        {
          "id": "standardpaket",
          "value": "yes"
        },
        {
          "id": "premiumpaket",
          "value": "yes"
        }
      ]
    },
    {
      "text": "Einzelgespräche",
      "packages": [
        {
          "id": "sparpaket",
          "value": "6"
        },
        {
          "id": "standardpaket",
          "value": "6"
        },
        {
          "id": "premiumpaket",
          "value": "12"
        }
      ]
    },
    {
      "text": "Stellenanzeigen (8 Wochen Laufzeit zum Veranstaltungstermin",
      "packages": [
        {
          "id": "sparpaket",
          "value": "no"
        },
        {
          "id": "standardpaket",
          "value": "1"
        },
        {
          "id": "premiumpaket",
          "value": "4"
        }
      ]
    },
    {
      "text": "Eintrag im Jobletter an bis zu 150.000 Empfänger:innen",
      "packages": [
        {
          "id": "sparpaket",
          "value": "no"
        },
        {
          "id": "standardpaket",
          "value": "no"
        },
        {
          "id": "premiumpaket",
          "value": "1"
        }
      ]
    }
  ],
  "button": {
    "icon": "download",
    "link": "#",
    "text": "Unterlagen herunterladen (PDF 1,2 Mb)"
  }
}
  • Content: 
    $compare-switch-breakpoint: m;

:root {
  --compare-background-color: var(--color-cyan-light);
  --compare-secondary-background-color: var(--color-blue-light);
  --compare-tertiary-background-color: var(--color-orange-light);
  --compare-number-line-color: var(--color-orange);
  --compare-yes-icon-color: var(--color-orange);
  --compare-no-icon-color: var(--color-midnight);
  --compare-package-icon-color: var(--color-orange);

  @include use-responsive-sizing(--compare-padding-block, responsive-map(xs 2.5rem, xl 5rem));
}

.compare {
  padding-block: var(--compare-padding-block);
  text-align: center;

  @include mq($from: $compare-switch-breakpoint) {
    background-color: var(--compare-background-color);
  }
}

.compare__inner {
  @include use-container($start-breakpoint: $compare-switch-breakpoint);
}

.compare__headline {
  margin-block-end: var(--compare-padding-block);
}

.compare__package {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.compare__package-icon {
  color: var(--compare-package-icon-color);
  display: block;
  font-size: 6rem;
}

.compare__package-headline {
  --headline-kicker-font-weight: var(--font-weight-regular);
  --headline-kicker-spacing: 0.5rem;
}

.compare__yes {
  color: var(--compare-yes-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
}

.compare__no {
  color: var(--compare-no-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
}

.compare__number {
  display: inline-block;
  flex-shrink: 0;
  font-size: 2.8rem;
  font-weight: var(--font-weight-semibold);
  inline-size: 3rem;
  line-height: 1;
  overflow: visible;
  padding-block-end: 0.2rem;
  position: relative;
  text-align: center;
  transform: translateY(-0.3rem);

  &::after {
    background-color: var(--compare-number-line-color);
    block-size: 0.8rem;
    content: '';
    inline-size: 100%;
    inset-block-end: -0.8rem;
    inset-inline-start: 0;
    mask-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 49"><path fill="#000" d="m106.8 6 24.4-3.6A127 127 0 0 1 148 .5h.7c.5 0 .7 0 1.2.2l1 .1c2 .5 2 .5 6 3.9l1.1 3.4c1.6 4.5 1.2 5.1-1 9v.2l7.1 1.4 3.1.6 4.2.7c7.1 1.2 13.4 1.9 19.4 2.1l-.9 20.8a174 174 0 0 1-18-1.7l-3.9-.6a543 543 0 0 1-16.8-3.2L134.4 34l-2.7-.5c-6.4-1.2-10.7-3-12.6-8l-.1-.3-12.7 2A739.7 739.7 0 0 0 53 37.8l-35.7 8.3L5 48.9.7 28.5l8.5-1.9 19.2-4.3 16.8-4c22.7-5.2 36.7-8.2 50.3-10.5l3.8-.6 7.5-1.2Z" /></svg>');
    mask-repeat: no-repeat;
    position: absolute;
  }
}

.compare__sections {
  @include mq($from: $compare-switch-breakpoint) {
    display: none;
  }
}

.compare__section {
  background-color: var(--compare-background-color);
  padding-block: 3.5rem;
  padding-inline: var(--inner-container-padding);

  &:nth-child(3n+2) {
    background-color: var(--compare-secondary-background-color);
  }

  &:nth-child(3n+3) {
    background-color: var(--compare-tertiary-background-color);
  }
}

.compare__section-items {
  display: grid;
  gap: 1rem;
  margin-block-start: 2rem;
}

.compare__section-item {
  align-items: flex-start;
  background-color: rgba(#fff, 0.4);
  display: flex;
  gap: 2rem;
  line-height: var(--line-height-default);
  padding-block: 2rem;
  padding-inline: 2rem;
  text-align: start;
}

.compare__section-item-text {
  align-self: center;
  margin-block: -0.5rem;
}

.compare__section-footer {
  font-size: 2.4rem;
  font-weight: var(--font-weight-semibold);
  margin-block-start: 2rem;
}

.compare__table {
  border-collapse: separate;
  border-spacing: 2.5rem 0;
  inline-size: 100%;
  table-layout: fixed;
  text-align: center;

  @include mq($until: $compare-switch-breakpoint) {
    display: none;
  }
}

.compare__table-row {
  position: relative;
}

.compare__table-cell {
  font-size: 1.8rem;
  line-height: 1.22;
  min-inline-size: 25rem;
  padding-block: 3.5rem;
  vertical-align: middle;
  word-wrap: break-word;

  .compare__table-head & {
    vertical-align: bottom;
  }

  .compare__table-foot & {
    font-size: 2.4rem;
    font-weight: var(--font-weight-semibold);
    vertical-align: top;
  }

  &:first-child {
    font-weight: var(--font-weight-semibold);
    inline-size: 30rem;
    text-align: start;
  }

  &:not(:first-child) {
    background-color: rgba($color-white, 0.4);
  }

  .compare__table-body &:first-child::before,
  .compare__table-foot &:first-child::before {
    background-color: rgba($color-midnight, 0.2);
    block-size: 2px;
    content: '';
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    position: absolute;
  }

  .compare__table-foot &:first-child::before {
    block-size: 4px;
  }
}

.compare__button {
  margin-block-start: var(--compare-padding-block);

  @include use-container();
}
  • URL: /components/raw/compare/compare.scss
  • Filesystem Path: src/components/3-organisms/compare/compare.scss
  • Size: 4.7 KB

No notes defined.