Tabs

In progress

Tabs are used for structuring information within a page. Tabs enable content producers to limit the amount of information presented to users at a single point in time.

Attributes:

tab-id for component <hy-tabs> is required and is used to identify tab component.
tab-list-label attribute provides aria-label for the tablist buttons to describe content of tabs.
tab-title for <hy-tabs-item> is required. This is used for text of in tablist as well as identify single tab-item.

Tabs contain the tabs themselves (active and inactive), a divigind line between the tabs and content and tab controls (right and left arrows) for controlling tab content that exceeds the width of the content area. Click of the tab control should display a full set of new items (ie. a new "page" of tabs) to avoid excessive scrolling to find the last items.

# Examples

Im a text paragraph with a heading.

Accordion content

Tab Content FOUR Here

This is another heading

This is a 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. In hac habitasse platea dictumst. 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. In hac habitasse platea dictumst. 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. In hac habitasse platea dictumst.

<hy-tabs tab-id="example-tab-1" tab-list-label="Tablist aria label">
  <hy-tabs-item tab-title="For business and organisations">
    <hy-heading heading="h3">Im a text paragraph with a heading.</hy-heading>
    <hy-paragraph-text>
      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. In hac habitasse platea
      dictumst.
    </hy-paragraph-text>
  </hy-tabs-item>
  <hy-tabs-item tab-title="For alumni">
      <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>
    </hy-tabs-item>
    <hy-tabs-item tab-title="Support us">Tab Content FOUR Here</hy-tabs-item>
    <hy-tabs-item tab-title="Contact us">
      <hy-introduction
        variant="blue"
        text-title="This is an introduction"
        text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
        url="https://www.google.com"
        url-title="Check this link"
        sc-label="label for link"
        image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
      ></hy-introduction>
    </hy-tabs-item>
    <hy-tabs-item tab-title="One more">
      <hy-paragraph-text>
        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. In hac habitasse platea
        dictumst.
      </hy-paragraph-text>
      <hy-paragraph-text>
        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. In hac habitasse platea
        dictumst.
      </hy-paragraph-text>
    </hy-tabs-item>
    <hy-tabs-item tab-title="Tab with text content 7">
      <hy-paragraph-text>
        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. In hac habitasse platea
        dictumst.
      </hy-paragraph-text>
      <hy-adjacent-image-text
        image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
        text-title="Text title 2"
        text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        main-url="https://www.google.com"
        main-url-title="Standalone link"
        main-url-aria-label="Standalone link internal"
        main-url-is-external="false"
        main-url-2="https://www.google.com"
        main-url-title-2="CTA standalone URL example"
        main-url-aria-label-2=""
        main-url-is-external-2="false"
      >
      </hy-adjacent-image-text>
    </hy-tabs-item>
    <hy-tabs-item tab-title="Just a tab">
      <hy-heading heading="h2">This is another heading</hy-heading>
      <hy-paragraph-text>
        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. In hac habitasse platea
        dictumst.
      </hy-paragraph-text>
    </hy-tabs-item>
    <hy-tabs-item tab-title="Tab with text content last one">
      <hy-heading heading="h3">This is a heading</hy-heading>
      <hy-paragraph-text>
        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. In hac habitasse platea
        dictumst. 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. In hac
        habitasse platea dictumst. 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. In hac
        habitasse platea dictumst.
      </hy-paragraph-text>
    </hy-tabs-item>
</hy-tabs>

# Properties

Property	Attribute	Description	Type	Default
`tabId`	`tab-id`	TabId is required for each hy-tabs component to identify it.	`string`	`undefined`
`tabListLabel`	`tab-list-label`	TabListLabel is aria-label for tablist	`string`	`''`

# Dependencies

# Depends on

hy-icon

# Graph

graph TD;
  hy-tabs --> hy-icon
  style hy-tabs fill:#f9f,stroke:#333,stroke-width:4px

Helsinki University Design System

← Site Header Text with two columns →