Tabs - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses a <section> tag with the z-tabs HTML custom attribute. Check the Tabs anatomy for more information.

z-tabs ​

The z-tabs attribute is the main attribute used to style the tabs component.

HTML - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Tabs.css" />
Code
html
<section z-tabs>
  <nav aria-labelledby="tablist-1" role="tablist" tab-index="1" />
  <label role="tab" id="tab-1" aria-controls="tabpanel-1">Maria
    Ahlefeldt<input name="tabset" type="radio" value="1" checked />
  </label>
  <label role="tab" id="tab-2" aria-controls="tabpanel-2">Carl
    Andersen<input name="tabset" type="radio" value="2" />
  </label>
  <label role="tab" id="tab-3" aria-controls="tabpanel-3">Ida da
    Fonseca<input name="tabset" type="radio" value="3" />
  </label>
  <label role="tab" id="tab-4" aria-controls="tabpanel-4">Peter
    Müller<input name="tabset" type="radio" value="4" />
  </label>
  </nav>
  <main>
    <article role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1" />
    <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer.
      She is known as the first female composer in Denmark. Maria Theresia composed music for several ballets,
      operas, and plays of the royal theatre. She was given good critic as a composer and described as a “<span
        lang="da" />
      virkelig Tonekunstnerinde
      </span>” ('a True Artist of Music').</p>
    </article>
    <article role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2" />
    <p>
      Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a
      Danish flutist, conductor and composer born in Copenhagen,
      son of the flutist Christian Joachim Andersen. Both as a
      virtuoso and as composer of flute music, he is considered
      one of the best of his time. He was considered to be a tough
      leader and teacher and demanded as such a lot from his
      orchestras but through that style he reached a high level.
    </p>
    </article>
    <article role="tabpanel" id="tabpanel-3" aria-labelledby="tab-3" />
    <p>
      Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was
      a Danish opera singer and composer. Ida Henriette da Fonseca
      was the daughter of Abraham da Fonseca (1776-1849) and Marie
      Sofie Kiærskou (1784-1863). She and her sister Emilie da
      Fonseca were students of Giuseppe Siboni, choir master of
      the Opera in Copenhagen. She was given a place at the royal
      Opera alongside her sister the same year she debuted in
      1827.
    </p>
    </article>
    <article role="tabpanel" id="tabpanel-4" aria-labelledby="tab-4" />
    <p>
      Peter Erasmus Lange-Müller (1 December 1850 - 26 February
      1926) was a Danish composer and pianist. His compositional
      style was influenced by Danish folk music and by the work of
      Robert Schumann; Johannes Brahms; and his Danish countrymen,
      including J.P.E. Hartmann.
    </p>
    </article>
  </main>
</section>