HTML - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tabs - CSS Component β
Browser support β
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.
CSS - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Playground β
Customization β
HTML Examples β
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@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>