<div class="accordion accordion--background-is-white">
    <details class="accordion__item">
        <summary class="accordion__item-label">
            <span class="accordion__item-label-text-container">
                <span class="accordion__item-label-text">Item with a rather long title</span>
            </span>
            <span class="accordion__item-label-icon">
                <svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <title>toggle</title>
                    <g>
                        <path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
                    </g>
                </svg>
            </span>
        </summary>
        <div class="accordion__item-content">
            <h2>A header passed within the rich text field</h2>
            <p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <em>adipiscing elit</em>. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, <a href='#'>nulla luctus pharetra vulputate</a>, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan.</p>
            <hr>
            <h3>Unordered list</h3>
            <ul>
                <li>Max Eisenburger: Economic Development and the Solar Industry. Ph.D. Expected 2019 </li>
                <li>Steve Sherman: Policing, Planmaking and Anchor Institutions. Ph.D. Expected 2019<ul>
                        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
                        <li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
                    </ul>
                </li>
                <li>Ozge Yenigun: Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li>
            </ul>
            <h3>Ordered list</h3>
            <ol>
                <li>Adrienne Cooke: Fair Workweek Policies (Spring 2019) </li>
                <li>Tejashree Kulkarni: Workforce Development (Spring 2019) </li>
                <li>Jacob Malmsten: East-Central Illinois Labor Market Profile (Spring 2019)</li>
            </ol>
        </div>
    </details>
</div>
<div class="accordion accordion--background-is-{{ background ?: 'unknown' }}">
    {% for item in component.items %}
        <details class="accordion__item" {% if item.startOpen %}open{% endif %}>
            <summary class="accordion__item-label">
                <span class="accordion__item-label-text-container">
                    <span class="accordion__item-label-text">{{ item.label }}</span>
                </span>
                <span class="accordion__item-label-icon">
                    {% include 'bits/icons/chevron-down.twig' %}
                </span>
            </summary>
            <div class="accordion__item-content">
                {{ item.content | raw }}
            </div>
        </details>
    {% endfor %}
</div>
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "component": {
    "type": "accordion",
    "items": [
      {
        "label": "Item with a rather long title",
        "content": "<h2>A header passed within the rich text field</h2><p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <em>adipiscing elit</em>. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, <a href='#'>nulla luctus pharetra vulputate</a>, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan.</p><hr><h3>Unordered list</h3> <ul><li>Max Eisenburger: Economic Development and the Solar Industry. Ph.D. Expected 2019 </li><li>Steve Sherman: Policing, Planmaking and Anchor Institutions. Ph.D. Expected 2019<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li><li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li></ul></li><li>Ozge Yenigun: Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li></ul> <h3>Ordered list</h3> <ol><li>Adrienne Cooke: Fair Workweek Policies (Spring 2019) </li><li>Tejashree Kulkarni: Workforce Development (Spring 2019) </li><li>Jacob Malmsten: East-Central Illinois Labor Market Profile (Spring 2019)</li></ol> ",
        "startOpen": false
      }
    ]
  }
}
  • Content:
    .accordion {
        @include componentWithMargin;
        --accordionBodyBackground: var(--blueTint);
    
        overflow: hidden;
    
        &--background-is-blueTint {
            --accordionBodyBackground: var(--white);
        }
    
        &__item-label {
            align-items: center;
            background-color: var(--blue);
            display: flex;
            gap: 2rem;
            justify-content: space-between;
            padding-right: 1.5rem;
            padding-top: .25rem;
    
            &::marker {
                display: none;
            }
        }
    
        &__item-label-text-container {
            @include headline5;
            background-color: transparent;
            color: var(--white);
            padding: .5rem 1.5rem .75rem;
            position: relative;
            transition: color 200ms ease-in-out;
    
            &:before {
                background-color: var(--accordionBodyBackground);
                bottom: 0;
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                transform-origin: top left;
                transform: translateX(-100%);
                transition: transform 200ms ease-in-out;
                width: 150%;
            }
        }
    
        &__item[open] &__item-label-text-container {
            background-color: var(--accordionBodyBackground);
            color: var(--blue);
            transition: color 200ms ease-in-out, background-color 200ms 200ms ease-in-out;
    
            &:before {
                transform: skewX(15deg)
            }
        }
    
        &__item-label-text {
            position: relative;
        }
    
        &__item-label-icon {
            color: var(--white);
            flex-shrink: 0;
            width: .75rem;
            transform: rotate(-180deg);
            transition: transform 200ms ease-in-out;
        }
    
        &__item[open] &__item-label-icon {
            transform: rotate(0deg);
        }
    
        &__item-content {
            @include richText;
            background-color: var(--accordionBodyBackground);
            color: var(--black);
            padding: 2rem 1.5rem 1.25rem;
        }
    }
    
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: patterns/components/accordion/accordion.scss
  • Size: 1.9 KB

No notes defined.