Accordion

Accordions save vertical space on a page by showing and hiding multiple blocks of content. Consider using reveal if you need to show and hide a single block of content.

<tg-accordion>
    <tg-accordion-item>
        <tg-accordion-heading>
            First heading
        </tg-accordion-heading>
        Content
    </tg-accordion-item>
    <tg-accordion-item>
        <tg-accordion-heading>
            Second heading
        </tg-accordion-heading>
        Content
    </tg-accordion-item>
    <tg-accordion-item>
        <tg-accordion-heading>
            Third heading
        </tg-accordion-heading>
        Content
    </tg-accordion-item>
</tg-accordion>

Behaviour

• The last accordion item loses its bottom border and margin.
• At the md breakpoint and larger:
  • Accordions sit within the padding of their container
  • Icons sit next to the item heading.
• When the screen is smaller than the md breakpoint:
  • Accordions bleed out from their container to full width
  • Icons are aligned to the right.