Accordion

In progress

Accordion provides simple accordion element to contain content. HUDS Accordion is fully accessible for keyboard usage and screen readers.

# Example of Accordion

Accordion content Accordion content Accordion content
<hy-accordion-container accordionId="example-accordion">
  <hy-accordion-item accordiontitle="This is a accordion item 1">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 2">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 3">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
</hy-accordion-container>

# Example of mini-accordions (can be used inside Tabs)

Mini Accordion content Mini Accordion content n pulvinar eleifend convallis. Suspendisse elit erat, venenatis eget ullamcorper ut, laoreet iaculis nisl. Sed porta, felis id rhoncus aliquet, quam ipsum pellentesque metus, in sodales quam nunc vitae risus. Quisque in venenatis massa. Phasellus neque risus, ornare quis nisl ultricies, ullamcorper consectetur orci. Suspendisse rhoncus orci odio, id faucibus ipsum tincidunt nec. Ut eget ante sit amet justo volutpat convallis vitae et augue. Phasellus sagittis cursus fermentum. Mini Accordion content
<hy-accordion-container accordionId="example-mini-accordion-tabs">
    <hy-accordion-item accordiontitle="This is an H4 accordion title inside an accordion" variant="mini">
      <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
    </hy-accordion-item>
    <hy-accordion-item accordiontitle="Here you can see another one" variant="mini">
      <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
    </hy-accordion-item>
    <hy-accordion-item accordiontitle="One of them is opened for us to see" variant="mini">
      <hy-paragraph-text
        >n pulvinar eleifend convallis. Suspendisse elit erat, venenatis eget ullamcorper ut, laoreet
        iaculis nisl. Sed porta, felis id rhoncus aliquet, quam ipsum pellentesque metus, in sodales quam
        nunc vitae risus. Quisque in venenatis massa. Phasellus neque risus, ornare quis nisl ultricies,
        ullamcorper consectetur orci. Suspendisse rhoncus orci odio, id faucibus ipsum tincidunt nec. Ut
        eget ante sit amet justo volutpat convallis vitae et augue. Phasellus sagittis cursus
        fermentum.</hy-paragraph-text
      >
    </hy-accordion-item>
    <hy-accordion-item accordiontitle="The last similar thing down under" variant="mini">
      <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
    </hy-accordion-item>
</hy-accordion-container>

# Accordion container Properties

Property Attribute Description Type Default
accordionid accordionid Id is used to identify container element. ID should always be unique. string undefined

# Accordion item Properties

Property Attribute Description Type Default
accordiontitle accordiontitle Title is used for accordion items heading. Text that is displayed when accordion is closed. string undefined
variant variant Standard or mini accordions. Use "mini" for mini-accordions AccordionVariants.default \| AccordionVariants.mini AccordionVariants.default

# Dependencies

# Used by

# Depends on

Helsinki University Design System

← Anchor link list →