readme.md

title: Accordion
sidebar: true
<hy-accordion-container>
  <hy-accordion-item accordiontitle="This is a accordion title">
    Accordion content
  </hy-accordion-item>
</hy-accordion-container>
<hy-accordion-container>
  <hy-accordion-item accordiontitle="This is accordion item 1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
    Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
    Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
    Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
    Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is accordion item 2">
    <hy-grid-container>
      <hy-grid-row>
        <hy-grid-item columnsSm="12">
          <hy-heading heading="h3">Lorem ipsum Heading</hy-heading>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
          Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
          Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
          Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
          Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
        </hy-grid-item>
      </hy-grid-row>
      <hy-grid-row>
        <hy-grid-item columns="12"><hy-heading heading="h4" section="subsection">Divider heading</hy-heading></hy-grid-item>
        <hy-grid-item columnsSm="12" columns="6" columnsLg="6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
          Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
          Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
          Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
          Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
        </hy-grid-item>
        <hy-grid-item columnsSm="12" columns="6" columnsLg="6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
          Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
          Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
          Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
          Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
        </hy-grid-item>
      </hy-grid-row>
    </hy-grid-container>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is accordion item 3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </hy-accordion-item>
</hy-accordion-container>
graph TD;
  hy-accordion-item --> hy-heading
  hy-accordion-item --> hy-icon
  style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px