OFRAG Frontend Components Library v0.0.0

Attributes Table: Two Columns 

<div class="attributes-table">
      <div class="attributes-table__column">
          <div class="attributes-table__column-title">Allgemeine Informationen</div>
          <div class="attributes-table__attributes-list">
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Marke</div>
                  <div class="attributes-table__value">
                      <a href="#" class="attributes-table__value-link">UYN</a>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Einsatzbereich</div>
                  <div class="attributes-table__value">
                      <a href="#" class="attributes-table__value-link">Outdoor</a>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Kategorie</div>
                  <div class="attributes-table__value">
                      <a href="#" class="attributes-table__value-link">Schuhe</a>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Kategorie</div>
                  <div class="attributes-table__value">
                      <div class="links">
                          <ul class="links__list">
                              <li class="links__list-item">
                                  <a class="links__link--pdf" href="#" target="_blank" rel="noopener noreferrer">Infobroschüre (2,3 MB)</a>
                              </li>
                              <li class="links__list-item">
                                  <a class="links__link--excel" href="#" target="_blank" rel="noopener noreferrer">Produktelist (1,3 MB)</a>
                              </li>
                              <li class="links__list-item">
                                  <a class="links__link--powerpoint" href="#" target="_blank" rel="noopener noreferrer">Wella Präsentation (1,3 MB)</a>
                              </li>
                              <li class="links__list-item">
                                  <a class="links__link--word" href="#" target="_blank" rel="noopener noreferrer">Farben &amp; Anwendung (4,3 MB)</a>
                              </li>
                              <li class="links__list-item">
                                  <a class="links__link--open-office" href="#" target="_blank" rel="noopener noreferrer">Farben &amp; Anwendung (4,3 MB)</a>
                              </li>
                              <li class="links__list-item">
                                  <a class="links__link--internal" href="#" target="_blank" rel="noopener noreferrer">Step-by-Step Anleitung</a>
                              </li>
                              <li class="links__list-item">
                                  <a class="links__link--external" href="#" target="_blank" rel="noopener noreferrer">Wella Herstellerseite</a>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Umpack bei</div>
                  <div class="attributes-table__value">
                      <div class="attributes-table__value-separated">
                          <div class="attributes-table__value-description">20 Stück</div>
                          <div class="attributes-table__value-tooltip">
                              <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Das Umpack bezeichnet eine Zusammenfassung von gleichen Artikeln zu einer gut zu lagernden Verpackungseinheit. In diesem Fall 20 Stück oder ein Vielfaches davon.">
                                  <span class="visually-hidden">Information</span>
                              </button>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">minimumOrderQuantity</div>
                  <div class="attributes-table__value">
                      8547625
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Farbe</div>
                  <div class="attributes-table__value">
                      8/97 Hell-Lichtblond Cendré-Mahagoni
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Grösse</div>
                  <div class="attributes-table__value">
                      60ml
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Inhalt</div>
                  <div class="attributes-table__value">
                      2 Stk
                  </div>
              </div>
          </div>
      </div>
      <div class="attributes-table__column">
          <div class="attributes-table__column-title">Produktinformationen</div>
          <div class="attributes-table__attributes-list">
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Marke</div>
                  <div class="attributes-table__value">
                      <a href="#" class="attributes-table__value-link">UYN</a>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Einsatzbereich</div>
                  <div class="attributes-table__value">
                      <a href="#" class="attributes-table__value-link">Outdoor</a>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Kategorie</div>
                  <div class="attributes-table__value">
                      <a href="#" class="attributes-table__value-link">Schuhe</a>
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Artikelnr.</div>
                  <div class="attributes-table__value">
                      8547625
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Farbe</div>
                  <div class="attributes-table__value">
                      8/97 Hell-Lichtblond Cendré-Mahagoni
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Grösse</div>
                  <div class="attributes-table__value">
                      60ml
                  </div>
              </div>
              <div class="attributes-table__attributes-list-item">
                  <div class="attributes-table__key">Inhalt</div>
                  <div class="attributes-table__value">
                      2 Stk
                  </div>
              </div>
          </div>
      </div>
  </div>
 
{% include '@SharedComponents/modules/b2b-product-detail/components/attributes-table/attributes-table.twig' %}
 
{
  "columns": [
    {
      "title": "Allgemeine Informationen",
      "attributes": [
        {
          "type": "link",
          "name": "Marke",
          "value": "UYN",
          "href": "#"
        },
        {
          "type": "link",
          "name": "Einsatzbereich",
          "value": "Outdoor",
          "href": "#"
        },
        {
          "type": "link",
          "name": "Kategorie",
          "value": "Schuhe",
          "href": "#"
        },
        {
          "type": "link-list",
          "name": "Kategorie",
          "value": {
            "links": [
              {
                "name": "Infobroschüre (2,3 MB)",
                "type": "pdf",
                "href": "#",
                "target": "_blank"
              },
              {
                "name": "Produktelist (1,3 MB)",
                "type": "excel",
                "href": "#",
                "target": "_blank"
              },
              {
                "name": "Wella Präsentation (1,3 MB)",
                "type": "powerpoint",
                "href": "#",
                "target": "_blank"
              },
              {
                "name": "Farben &amp; Anwendung (4,3 MB)",
                "type": "word",
                "href": "#",
                "target": "_blank"
              },
              {
                "name": "Farben &amp; Anwendung (4,3 MB)",
                "type": "open-office",
                "href": "#",
                "target": "_blank"
              },
              {
                "name": "Step-by-Step Anleitung",
                "type": "internal",
                "href": "#",
                "target": "_blank"
              },
              {
                "name": "Wella Herstellerseite",
                "type": "external",
                "href": "#",
                "target": "_blank"
              }
            ]
          }
        },
        {
          "type": "tooltip",
          "name": "Umpack bei",
          "value": "20 Stück",
          "context": {
            "variant": "small",
            "title": "Information",
            "content": "Das Umpack bezeichnet eine Zusammenfassung von gleichen Artikeln zu einer gut zu lagernden Verpackungseinheit. In diesem Fall 20 Stück oder ein Vielfaches davon."
          }
        },
        {
          "type": "text",
          "name": "minimumOrderQuantity",
          "value": "8547625"
        },
        {
          "type": "text",
          "name": "Farbe",
          "value": "8/97 Hell-Lichtblond Cendré-Mahagoni"
        },
        {
          "type": "text",
          "name": "Grösse",
          "value": "60ml"
        },
        {
          "type": "text",
          "name": "Inhalt",
          "value": "2 Stk"
        }
      ]
    },
    {
      "title": "Produktinformationen",
      "attributes": [
        {
          "type": "link",
          "name": "Marke",
          "value": "UYN",
          "href": "#"
        },
        {
          "type": "link",
          "name": "Einsatzbereich",
          "value": "Outdoor",
          "href": "#"
        },
        {
          "type": "link",
          "name": "Kategorie",
          "value": "Schuhe",
          "href": "#"
        },
        {
          "type": "text",
          "name": "Artikelnr.",
          "value": "8547625"
        },
        {
          "type": "text",
          "name": "Farbe",
          "value": "8/97 Hell-Lichtblond Cendré-Mahagoni"
        },
        {
          "type": "text",
          "name": "Grösse",
          "value": "60ml"
        },
        {
          "type": "text",
          "name": "Inhalt",
          "value": "2 Stk"
        }
      ]
    }
  ]
}
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-detail/components/attributes-table/attributes-table";
  • URL: /components/raw/attributes-table/attributes-table.scss
  • Filesystem Path: src/components/modules/b2b-product-detail/components/attributes-table/attributes-table.scss
  • Size: 146 Bytes

No notes defined.