Skip to main content Skip to navigation

Tabs

Tabs display one of two or more panes with navigation labels to toggle to other panes.

Responsive More Menu (Default Behavior)

Display as many tabs within a context’s available width, while including additional labels within a “More” Dropdown Menu. When the label of the selected pane doesn’t fit, the control becomes a Dropdown Menu that shows the selected tab in its resting state.

Don't Use When

  • The label of the selected tab must always be visible, since the label may be hidden within the menu in some conditions. Use horizontal scrolling tabs instead.

Episode I: The Phantom Menace

Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.

Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.

While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....

Episode II: Attack of the Clones

There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.

This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....

Episode III: Revenge of the Sith

War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.

In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.

As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....

Episode IV: A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....

Episode V: The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....

Episode VI: Return of the Jedi

Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.

Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.

When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...

Episode VII: The Force Awakens

Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.

With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.

Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....

<div class="comet-tabs  comet-tabs--more">
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-i-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode I</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-ii-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode II</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-iii-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode III</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-iv-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode IV</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-v-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode V</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-vi-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode VI</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-vii-star-wars-more-menu">
        <span class="comet-tab__label-text">Episode VII</span>
    </label>
    <label class="comet-tab__label comet-tab__label--more comet-dropdown-trigger js-comet-dropdown-trigger" data-comet-popover="comet-more-menu-id--28744" aria-hidden="true">
        <span class="comet-tab__label-text comet-tab__label-text--more">More</span>
        <svg class="comet-tab__more-menu-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned comet-tabs__more-menu" id="comet-more-menu-id--28744" data-comet-popover-align="left">
            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                <ul class="comet-list-group__list">
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-i-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode I
                            </span>
                        </a>
                    </li>
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-ii-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode II
                            </span>
                        </a>
                    </li>
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-iii-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode III
                            </span>
                        </a>
                    </li>
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-iv-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode IV
                            </span>
                        </a>
                    </li>
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-v-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode V
                            </span>
                        </a>
                    </li>
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-vi-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode VI
                            </span>
                        </a>
                    </li>
                    <li class="comet-list-group__row">
                        <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-vii-star-wars-more-menu">
                            <span class="comet-list-group__row-label">
                                Episode VII
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </label>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-i-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-i-star-wars-more-menu">
<div class="comet-tab__panel">
    <h1>Episode I: The Phantom Menace</h1>
    <p>
        Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
    </p>
    <p>
        Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
    </p>
    <p>
        While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-ii-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-ii-star-wars-more-menu" checked>
<div class="comet-tab__panel">
    <h1>Episode II: Attack of the Clones</h1>
    <p>
        There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
    </p>
    <p>
        This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
    </p>
    <p>
        Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iii-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-iii-star-wars-more-menu">
<div class="comet-tab__panel">
    <h1>Episode III: Revenge of the Sith</h1>
    <p>
        War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
    </p>
    <p>
        In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
    </p>
    <p>
        As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iv-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-iv-star-wars-more-menu">
<div class="comet-tab__panel">
    <h1>Episode IV: A New Hope</h1>
    <p>
        It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
    </p>
    <p>
        During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
    </p>
    <p>
        Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-v-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-v-star-wars-more-menu">
<div class="comet-tab__panel">
    <h1>Episode V: The Empire Strikes Back</h1>
    <p>
        It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
    </p>
    <p>
        Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
    </p>
    <p>
        The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vi-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-vi-star-wars-more-menu">
<div class="comet-tab__panel">
    <h1>Episode VI: Return of the Jedi</h1>
    <p>
        Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
    </p>
    <p>
        Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
    </p>
    <p>
        When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vii-star-wars-more-menu" name="star-wars-more-menu" value="comet-tab-panel-id--episode-vii-star-wars-more-menu">
<div class="comet-tab__panel">
    <h1>Episode VII: The Force Awakens</h1>
    <p>
        Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
    </p>
    <p>
        With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
    </p>
    <p>
        Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
    </p>
</div>
                
{{ comet.tabs(name="star-wars-more-menu", labels=["Episode I", "Episode II", "Episode III", "Episode IV", "Episode V", "Episode VI", "Episode VII"]) }}
{% call comet.tab_panel(label="Episode I", name="star-wars-more-menu") %}
    <h1>Episode I: The Phantom Menace</h1>
    <p>
        Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
    </p>
    <p>
        Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
    </p>
    <p>
        While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode II", name="star-wars-more-menu", active=true) %}
    <h1>Episode II: Attack of the Clones</h1>
    <p>
        There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
    </p>
    <p>
        This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
    </p>
    <p>
        Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode III", name="star-wars-more-menu") %}
    <h1>Episode III: Revenge of the Sith</h1>
    <p>
        War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
    </p>
    <p>
        In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
    </p>
    <p>
        As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode IV", name="star-wars-more-menu") %}
    <h1>Episode IV: A New Hope</h1>
    <p>
        It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
    </p>
    <p>
        During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
    </p>
    <p>
        Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode V", name="star-wars-more-menu") %}
    <h1>Episode V: The Empire Strikes Back</h1>
    <p>
        It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
    </p>
    <p>
        Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
    </p>
    <p>
        The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode VI", name="star-wars-more-menu") %}
    <h1>Episode VI: Return of the Jedi</h1>
    <p>
        Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
    </p>
    <p>
        Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
    </p>
    <p>
        When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode VII", name="star-wars-more-menu") %}
    <h1>Episode VII: The Force Awakens</h1>
    <p>
        Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
    </p>
    <p>
        With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
    </p>
    <p>
        Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
    </p>
{% endcall %}
                
Macro params reference

Responsive Horizontal Scrolling

Horizontal scrolling tabs are scrollable and swipeable when the tab collection’s width exceeds available width. When the page loads, the selected tab is always scrolled into view.

Episode I: The Phantom Menace

Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.

Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.

While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....

Episode II: Attack of the Clones

There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.

This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....

Episode III: Revenge of the Sith

War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.

In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.

As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....

Episode IV: A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....

Episode V: The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....

Episode VI: Return of the Jedi

Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.

Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.

When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...

Episode VII: The Force Awakens

Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.

With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.

Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....

Rogue One: A Star Wars Story

TBD - Some guys steal the Death Star Plans. Many Bothans die…

<div class="comet-tabs  comet-tabs--horizontal-sliding">
    <div class="comet-tabs__horizontal-sliding-outer-wrap">
        <div class="comet-tabs__horizontal-sliding-indicator comet-tabs__horizontal-sliding-indicator--left">
            <svg class="comet-tabs__horizontal-sliding-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-left"></use>
            </svg>
        </div>
        <div class="comet-tabs__horizontal-sliding-wrap">
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-i-comet-tabs--name">
                <span class="comet-tab__label-text">Episode I</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-ii-comet-tabs--name">
                <span class="comet-tab__label-text">Episode II</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-iii-comet-tabs--name">
                <span class="comet-tab__label-text">Episode III</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-iv-comet-tabs--name">
                <span class="comet-tab__label-text">Episode IV</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-v-comet-tabs--name">
                <span class="comet-tab__label-text">Episode V</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-vi-comet-tabs--name">
                <span class="comet-tab__label-text">Episode VI</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-vii-comet-tabs--name">
                <span class="comet-tab__label-text">Episode VII</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--rogue-one-a-star-wars-story-comet-tabs--name">
                <span class="comet-tab__label-text">Rogue One: A Star Wars Story</span>
            </label>
        </div>
        <div class="comet-tabs__horizontal-sliding-indicator comet-tabs__horizontal-sliding-indicator--right">
            <svg class="comet-tabs__horizontal-sliding-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
            </svg>
        </div>
    </div>
</div>
<div class="comet-row">
    <div class="comet-row__inner">
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-i-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-i-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Episode I: The Phantom Menace</h1>
            <p>
                Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
            </p>
            <p>
                Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
            </p>
            <p>
                While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-ii-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-ii-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Episode II: Attack of the Clones</h1>
            <p>
                There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
            </p>
            <p>
                This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
            </p>
            <p>
                Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iii-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-iii-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Episode III: Revenge of the Sith</h1>
            <p>
                War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
            </p>
            <p>
                In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
            </p>
            <p>
                As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iv-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-iv-comet-tabs--name" checked>
        <div class="comet-tab__panel">
            <h1>Episode IV: A New Hope</h1>
            <p>
                It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
            </p>
            <p>
                During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
            </p>
            <p>
                Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-v-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-v-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Episode V: The Empire Strikes Back</h1>
            <p>
                It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
            </p>
            <p>
                Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
            </p>
            <p>
                The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vi-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-vi-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Episode VI: Return of the Jedi</h1>
            <p>
                Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
            </p>
            <p>
                Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
            </p>
            <p>
                When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vii-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--episode-vii-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Episode VII: The Force Awakens</h1>
            <p>
                Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
            </p>
            <p>
                With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
            </p>
            <p>
                Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
            </p>
        </div>
        <input class="comet-tab__input" type="radio" id="comet-tab-panel-id--rogue-one-a-star-wars-story-comet-tabs--name" name="comet-tabs--name" value="comet-tab-panel-id--rogue-one-a-star-wars-story-comet-tabs--name">
        <div class="comet-tab__panel">
            <h1>Rogue One: A Star Wars Story</h1>
            <p>
                TBD - Some guys steal the Death Star Plans. Many Bothans die&hellip;
            </p>
        </div>
    </div>
</div>
                
{{ comet.tabs(labels=["Episode I", "Episode II", "Episode III", "Episode IV", "Episode V", "Episode VI", "Episode VII", "Rogue One: A Star Wars Story"], type="horizontal-sliding") }}
{% call comet.row() %}
    {% call comet.tab_panel(label="Episode I") %}
        <h1>Episode I: The Phantom Menace</h1>
        <p>
            Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
        </p>
        <p>
            Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
        </p>
        <p>
            While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Episode II") %}
        <h1>Episode II: Attack of the Clones</h1>
        <p>
            There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
        </p>
        <p>
            This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
        </p>
        <p>
            Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Episode III") %}
        <h1>Episode III: Revenge of the Sith</h1>
        <p>
            War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
        </p>
        <p>
            In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
        </p>
        <p>
            As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Episode IV", active=true) %}
        <h1>Episode IV: A New Hope</h1>
        <p>
            It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
        </p>
        <p>
            During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
        </p>
        <p>
            Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Episode V") %}
        <h1>Episode V: The Empire Strikes Back</h1>
        <p>
            It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
        </p>
        <p>
            Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
        </p>
        <p>
            The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Episode VI") %}
        <h1>Episode VI: Return of the Jedi</h1>
        <p>
            Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
        </p>
        <p>
            Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
        </p>
        <p>
            When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Episode VII") %}
        <h1>Episode VII: The Force Awakens</h1>
        <p>
            Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
        </p>
        <p>
            With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
        </p>
        <p>
            Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
        </p>
    {% endcall %}
    {% call comet.tab_panel(label="Rogue One: A Star Wars Story") %}
        <h1>Rogue One: A Star Wars Story</h1>
        <p>
            TBD - Some guys steal the Death Star Plans. Many Bothans die&hellip;
        </p>
    {% endcall %}
{% endcall %}
                
Macro params reference

Responsive Stacking

Stacking tabs display all tab panels when the width of the tab labels exceeds the available width for the component. Tab labels are rendered above each panel as <h3> elements. Resize browser to see stacking behavior

Don't Use When

  • There are more than three tabs
  • The switch to stacked panels causes a jarring layout change

Episode IV: A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....

Episode V: The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....

Episode VI: Return of the Jedi

Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.

Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.

When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...

<div class="comet-tabs  comet-tabs--stacking">
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-iv-a-new-hope-stack-example">
        <span class="comet-tab__label-text">Episode IV: A New Hope</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-v-the-empire-strikes-back-stack-example">
        <span class="comet-tab__label-text">Episode V: The Empire Strikes Back</span>
    </label>
    <label class="comet-tab__label" for="comet-tab-panel-id--episode-vi-return-of-the-jedi-stack-example">
        <span class="comet-tab__label-text">Episode VI: Return of the Jedi</span>
    </label>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iv-a-new-hope-stack-example" name="stack-example" value="comet-tab-panel-id--episode-iv-a-new-hope-stack-example">
<div class="comet-tab__panel">
    <h1>Episode IV: A New Hope</h1>
    <p>
        It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
    </p>
    <p>
        During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
    </p>
    <p>
        Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-v-the-empire-strikes-back-stack-example" name="stack-example" value="comet-tab-panel-id--episode-v-the-empire-strikes-back-stack-example" checked>
<div class="comet-tab__panel">
    <h1>Episode V: The Empire Strikes Back</h1>
    <p>
        It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
    </p>
    <p>
        Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
    </p>
    <p>
        The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
    </p>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vi-return-of-the-jedi-stack-example" name="stack-example" value="comet-tab-panel-id--episode-vi-return-of-the-jedi-stack-example">
<div class="comet-tab__panel">
    <h1>Episode VI: Return of the Jedi</h1>
    <p>
        Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
    </p>
    <p>
        Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
    </p>
    <p>
        When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
    </p>
</div>
                
{{ comet.tabs(name="stack-example", type="stacking", labels=["Episode IV: A New Hope", "Episode V: The Empire Strikes Back", "Episode VI: Return of the Jedi"]) }}
{% call comet.tab_panel(label="Episode IV: A New Hope", name="stack-example") %}
    <h1>Episode IV: A New Hope</h1>
    <p>
        It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
    </p>
    <p>
        During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
    </p>
    <p>
        Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode V: The Empire Strikes Back", name="stack-example", active=true) %}
    <h1>Episode V: The Empire Strikes Back</h1>
    <p>
        It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
    </p>
    <p>
        Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
    </p>
    <p>
        The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
    </p>
{% endcall %}
{% call comet.tab_panel(label="Episode VI: Return of the Jedi", name="stack-example") %}
    <h1>Episode VI: Return of the Jedi</h1>
    <p>
        Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
    </p>
    <p>
        Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
    </p>
    <p>
        When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
    </p>
{% endcall %}
                
Macro params reference

Style Modifiers

Overlay Above

Use a comet-tabs--overlay-above class to “pull up” the tabs on top of a previous element, such as a row above or a hero image, enabling them to sit on the edge of the element below.

Episode I: The Phantom Menace

Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.

Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.

While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....

Episode II: Attack of the Clones

There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.

This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....

Episode III: Revenge of the Sith

War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.

In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.

As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....

Episode IV: A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....

Episode V: The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....

Episode VI: Return of the Jedi

Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.

Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.

When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...

Episode VII: The Force Awakens

Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.

With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.

Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....

<img src="/images/components/tab/snow.jpg" alt="" style="width: 100%;">
<div class="comet-tabs comet-tabs--overlay-above comet-tabs--no-sliding-border comet-tabs--horizontal-sliding">
    <div class="comet-tabs__horizontal-sliding-outer-wrap">
        <div class="comet-tabs__horizontal-sliding-indicator comet-tabs__horizontal-sliding-indicator--left">
            <svg class="comet-tabs__horizontal-sliding-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-left"></use>
            </svg>
        </div>
        <div class="comet-tabs__horizontal-sliding-wrap">
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode I</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode II</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode III</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode IV</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode V</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode VI</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs-light-hero">
                <span class="comet-tab__label-text">Episode VII</span>
            </label>
        </div>
        <div class="comet-tabs__horizontal-sliding-indicator comet-tabs__horizontal-sliding-indicator--right">
            <svg class="comet-tabs__horizontal-sliding-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
            </svg>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs-light-hero">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--light-background">
        <div class="comet-row__inner">
            <div class="comet-long-form-text">
                <h1>Episode I: The Phantom Menace</h1>
                <p>
                    Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
                </p>
                <p>
                    Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
                </p>
                <p>
                    While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
                </p>
            </div>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs-light-hero">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--dark-background">
        <div class="comet-row__inner">
            <h1>Episode II: Attack of the Clones</h1>
            <p>
                There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
            </p>
            <p>
                This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
            </p>
            <p>
                Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs-light-hero">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--primary-background">
        <div class="comet-row__inner">
            <div class="comet-long-form-text">
                <h1>Episode III: Revenge of the Sith</h1>
                <p>
                    War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
                </p>
                <p>
                    In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
                </p>
                <p>
                    As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
                </p>
            </div>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs-light-hero">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--black-background">
        <div class="comet-row__inner">
            <h1>Episode IV: A New Hope</h1>
            <p>
                It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
            </p>
            <p>
                During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
            </p>
            <p>
                Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs-light-hero" checked>
<div class="comet-tab__panel">
    <div class="comet-row comet-row--inner-inset comet-row comet-theme--dark-background" style=" background-color: #3D126D">
        <div class="comet-row__inner">
            <h1>Episode V: The Empire Strikes Back</h1>
            <p>
                It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
            </p>
            <p>
                Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
            </p>
            <p>
                The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs-light-hero">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--dark-background" style=" background-image: url(/images/components/row/cosmos.jpeg)">
        <div class="comet-row__inner">
            <h1>Episode VI: Return of the Jedi</h1>
            <p>
                Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
            </p>
            <p>
                Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
            </p>
            <p>
                When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs-light-hero" name="star-wars-color-rows-aligned-tabs-light-hero" value="comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs-light-hero">
<div class="comet-tab__panel">
    <div class="comet-row comet-row--inner-inset" style=" background-color: #FF9500">
        <div class="comet-row__inner">
            <h1>Episode VII: The Force Awakens</h1>
            <p>
                Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
            </p>
            <p>
                With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
            </p>
            <p>
                Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
            </p>
        </div>
    </div>
</div>
                
<img src="/images/components/tab/snow.jpg" alt="" style="width: 100%;">
    {# {% call comet.row() %} #}
        {{ comet.tabs(class="comet-tabs--overlay-above comet-tabs--no-sliding-border", name="star-wars-color-rows-aligned-tabs-light-hero", type="horizontal-sliding", labels=["Episode I", "Episode II", "Episode III", "Episode IV", "Episode V", "Episode VI", "Episode VII"]) }}
    {# {% endcall %} #}
    {% call comet.tab_panel(label="Episode I", name="star-wars-color-rows-aligned-tabs-light-hero") %}
        <div class="comet-row comet-theme--light-background">
            <div class="comet-row__inner">
                <div class="comet-long-form-text">
                    <h1>Episode I: The Phantom Menace</h1>
                    <p>
                        Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
                    </p>
                    <p>
                        Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
                    </p>
                    <p>
                        While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
                    </p>
                </div>
            </div>
        </div>
    {% endcall %}
    {% call comet.tab_panel(label="Episode II", name="star-wars-color-rows-aligned-tabs-light-hero") %}
        <div class="comet-row comet-theme--dark-background">
            <div class="comet-row__inner">
                <h1>Episode II: Attack of the Clones</h1>
                <p>
                    There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
                </p>
                <p>
                    This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
                </p>
                <p>
                    Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
                </p>
            </div>
        </div>
    {% endcall %}
    {% call comet.tab_panel(label="Episode III", name="star-wars-color-rows-aligned-tabs-light-hero") %}
        <div class="comet-row comet-theme--primary-background">
            <div class="comet-row__inner">
                <div class="comet-long-form-text">
                    <h1>Episode III: Revenge of the Sith</h1>
                    <p>
                        War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
                    </p>
                    <p>
                        In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
                    </p>
                    <p>
                        As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
                    </p>
                </div>
            </div>
        </div>
    {% endcall %}
    {% call comet.tab_panel(label="Episode IV", name="star-wars-color-rows-aligned-tabs-light-hero") %}
    <div class="comet-row comet-theme--black-background">
        <div class="comet-row__inner">
            <h1>Episode IV: A New Hope</h1>
            <p>
                It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
            </p>
            <p>
                During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
            </p>
            <p>
                Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
            </p>
        </div>
    </div>
    {% endcall %}
    {% call comet.tab_panel(label="Episode V", name="star-wars-color-rows-aligned-tabs-light-hero", active=true) %}
        {% call comet.row(background_color="#3D126D", class="comet-row--inner-inset comet-row comet-theme--dark-background") %}
            <h1>Episode V: The Empire Strikes Back</h1>
            <p>
                It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
            </p>
            <p>
                Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
            </p>
            <p>
                The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
            </p>
        {% endcall %}
    {% endcall %}
    {% call comet.tab_panel(label="Episode VI", name="star-wars-color-rows-aligned-tabs-light-hero") %}
        {% call comet.row(
                    background_image="/images/components/row/cosmos.jpeg",
                    class="comet-theme--dark-background") %}
            <h1>Episode VI: Return of the Jedi</h1>
            <p>
                Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
            </p>
            <p>
                Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
            </p>
            <p>
                When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
            </p>
        {% endcall %}
    {% endcall %}
    {% call comet.tab_panel(label="Episode VII", name="star-wars-color-rows-aligned-tabs-light-hero") %}
        {% call comet.row(background_color="#FF9500", class="comet-row--inner-inset") %}
            <h1>Episode VII: The Force Awakens</h1>
            <p>
                Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
            </p>
            <p>
                With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
            </p>
            <p>
                Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
            </p>
        {% endcall %}
    {% endcall %}
                
Macro params reference

Light Tab Labels

Use a comet-tabs--on-dark class to switch the text of the tab labels to white.

Episode I: The Phantom Menace

Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.

Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.

While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....

Episode II: Attack of the Clones

There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.

This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....

Episode III: Revenge of the Sith

War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.

In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.

As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....

Episode IV: A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....

Episode V: The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....

Episode VI: Return of the Jedi

Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.

Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.

When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...

Episode VII: The Force Awakens

Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.

With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.

Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....

<img src="/images/components/tab/cosmos.jpg" alt="" style="width: 100%;">
<div class="comet-row">
    <div class="comet-row__inner">
        <div class="comet-tabs comet-tabs--on-dark comet-tabs--overlay-above comet-tabs--more">
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode I</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode II</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode III</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode IV</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode V</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode VI</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs">
                <span class="comet-tab__label-text">Episode VII</span>
            </label>
            <label class="comet-tab__label comet-tab__label--more comet-dropdown-trigger js-comet-dropdown-trigger" data-comet-popover="comet-more-menu-id--4922" aria-hidden="true">
                <span class="comet-tab__label-text comet-tab__label-text--more">More</span>
                <svg class="comet-tab__more-menu-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
                </svg>
                <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned comet-tabs__more-menu" id="comet-more-menu-id--4922" data-comet-popover-align="left">
                    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode I
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode II
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode III
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode IV
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode V
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode VI
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs">
                                    <span class="comet-list-group__row-label">
                                        Episode VII
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-i-star-wars-color-rows-aligned-tabs" checked>
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--light-background">
        <div class="comet-row__inner">
            <div class="comet-long-form-text">
                <h1>Episode I: The Phantom Menace</h1>
                <p>
                    Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
                </p>
                <p>
                    Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
                </p>
                <p>
                    While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
                </p>
            </div>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-ii-star-wars-color-rows-aligned-tabs">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--dark-background">
        <div class="comet-row__inner">
            <h1>Episode II: Attack of the Clones</h1>
            <p>
                There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
            </p>
            <p>
                This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
            </p>
            <p>
                Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-iii-star-wars-color-rows-aligned-tabs">
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--primary-background">
        <div class="comet-row__inner">
            <div class="comet-long-form-text">
                <h1>Episode III: Revenge of the Sith</h1>
                <p>
                    War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
                </p>
                <p>
                    In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
                </p>
                <p>
                    As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
                </p>
            </div>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-iv-star-wars-color-rows-aligned-tabs" checked>
<div class="comet-tab__panel">
    <div class="comet-row comet-theme--black-background">
        <div class="comet-row__inner">
            <h1>Episode IV: A New Hope</h1>
            <p>
                It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
            </p>
            <p>
                During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
            </p>
            <p>
                Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-v-star-wars-color-rows-aligned-tabs">
<div class="comet-tab__panel">
    <div class="comet-row comet-row--inner-inset comet-row comet-theme--dark-background" style=" background-color: #3D126D">
        <div class="comet-row__inner">
            <h1>Episode V: The Empire Strikes Back</h1>
            <p>
                It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
            </p>
            <p>
                Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
            </p>
            <p>
                The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-vi-star-wars-color-rows-aligned-tabs">
<div class="comet-tab__panel">
    <div class="comet-row">
        <div class="comet-row__inner">
            <h1>Episode VI: Return of the Jedi</h1>
            <p>
                Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
            </p>
            <p>
                Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
            </p>
            <p>
                When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
            </p>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs" name="star-wars-color-rows-aligned-tabs" value="comet-tab-panel-id--episode-vii-star-wars-color-rows-aligned-tabs">
<div class="comet-tab__panel">
    <div class="comet-row comet-row--inner-inset" style=" background-color: #FF9500">
        <div class="comet-row__inner">
            <h1>Episode VII: The Force Awakens</h1>
            <p>
                Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
            </p>
            <p>
                With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
            </p>
            <p>
                Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
            </p>
        </div>
    </div>
</div>
                
<img src="/images/components/tab/cosmos.jpg" alt="" style="width: 100%;">
{% call comet.row() %}
    {{ comet.tabs(class="comet-tabs--on-dark comet-tabs--overlay-above", labels=["Episode I", "Episode II", "Episode III", "Episode IV", "Episode V", "Episode VI", "Episode VII"], name="star-wars-color-rows-aligned-tabs") }}
{% endcall %}
{% call comet.tab_panel(label="Episode I", name="star-wars-color-rows-aligned-tabs", active=true) %}
    <div class="comet-row comet-theme--light-background">
        <div class="comet-row__inner">
            <div class="comet-long-form-text">
                <h1>Episode I: The Phantom Menace</h1>
                <p>
                    Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.
                </p>
                <p>
                    Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.
                </p>
                <p>
                    While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....
                </p>
            </div>
        </div>
    </div>
{% endcall %}
{% call comet.tab_panel(label="Episode II", name="star-wars-color-rows-aligned-tabs") %}
    <div class="comet-row comet-theme--dark-background">
        <div class="comet-row__inner">
            <h1>Episode II: Attack of the Clones</h1>
            <p>
                There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.
            </p>
            <p>
                This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy.
            </p>
            <p>
                Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....
            </p>
        </div>
    </div>
{% endcall %}
{% call comet.tab_panel(label="Episode III", name="star-wars-color-rows-aligned-tabs") %}
    <div class="comet-row comet-theme--primary-background">
        <div class="comet-row__inner">
            <div class="comet-long-form-text">
                <h1>Episode III: Revenge of the Sith</h1>
                <p>
                    War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.
                </p>
                <p>
                    In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.
                </p>
                <p>
                    As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....
                </p>
            </div>
        </div>
    </div>
{% endcall %}
{% call comet.tab_panel(label="Episode IV", name="star-wars-color-rows-aligned-tabs", active=true) %}
<div class="comet-row comet-theme--black-background">
    <div class="comet-row__inner">
        <h1>Episode IV: A New Hope</h1>
        <p>
            It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
        </p>
        <p>
            During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
        </p>
        <p>
            Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....
        </p>
    </div>
</div>
{% endcall %}
{% call comet.tab_panel(label="Episode V", name="star-wars-color-rows-aligned-tabs") %}
    {% call comet.row(background_color="#3D126D", class="comet-row--inner-inset comet-row comet-theme--dark-background") %}
        <h1>Episode V: The Empire Strikes Back</h1>
        <p>
            It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
        </p>
        <p>
            Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
        </p>
        <p>
            The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....
        </p>
    {% endcall %}
{% endcall %}
{% call comet.tab_panel(label="Episode VI", name="star-wars-color-rows-aligned-tabs") %}
    {% call comet.row() %}
        <h1>Episode VI: Return of the Jedi</h1>
        <p>
            Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.
        </p>
        <p>
            Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.
        </p>
        <p>
            When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...
        </p>
    {% endcall %}
{% endcall %}
{% call comet.tab_panel(label="Episode VII", name="star-wars-color-rows-aligned-tabs") %}
    {% call comet.row(background_color="#FF9500", class="comet-row--inner-inset") %}
        <h1>Episode VII: The Force Awakens</h1>
        <p>
            Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.
        </p>
        <p>
            With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.
        </p>
        <p>
            Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....
        </p>
    {% endcall %}
{% endcall %}
                
Macro params reference

No Sliding Border (horizontal sliding tabs only)

Use a comet-tabs--no-sliding-border class to prevent the a 1px border from appearing below the horizontal sliding tabs when the horizontal sliding affordances are active.

The Hobbit: An Unexpected Journey

The Hobbit: The Desolation of Smaug

The Hobbit: The Battle of the Five Armies

Lord of the Rings: The Fellowship of the Ring

Lord of the Rings: The Two Towers

Lord of the Rings: The Return of the King

<img src="/images/components/tab/snow.jpg" alt="" style="width: 100%;">
<div class="comet-tabs comet-tabs--no-sliding-border comet-tabs--overlay-above comet-tabs--horizontal-sliding">
    <div class="comet-tabs__horizontal-sliding-outer-wrap">
        <div class="comet-tabs__horizontal-sliding-indicator comet-tabs__horizontal-sliding-indicator--left">
            <svg class="comet-tabs__horizontal-sliding-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-left"></use>
            </svg>
        </div>
        <div class="comet-tabs__horizontal-sliding-wrap">
            <label class="comet-tab__label" for="comet-tab-panel-id--the-hobbit-an-unexpected-journey-tolkien">
                <span class="comet-tab__label-text">The Hobbit: An Unexpected Journey</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--the-hobbit-the-desolation-of-smaug-tolkien">
                <span class="comet-tab__label-text">The Hobbit: The Desolation of Smaug</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--the-hobbit-the-battle-of-the-five-armies-tolkien">
                <span class="comet-tab__label-text">The Hobbit: The Battle of the Five Armies</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--lord-of-the-rings-the-fellowship-of-the-ring-tolkien">
                <span class="comet-tab__label-text">Lord of the Rings: The Fellowship of the Ring</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--lord-of-the-rings-the-two-towers-tolkien">
                <span class="comet-tab__label-text">Lord of the Rings: The Two Towers</span>
            </label>
            <label class="comet-tab__label" for="comet-tab-panel-id--lord-of-the-rings-the-return-of-the-king-tolkien">
                <span class="comet-tab__label-text">Lord of the Rings: The Return of the King</span>
            </label>
        </div>
        <div class="comet-tabs__horizontal-sliding-indicator comet-tabs__horizontal-sliding-indicator--right">
            <svg class="comet-tabs__horizontal-sliding-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
            </svg>
        </div>
    </div>
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--the-hobbit-an-unexpected-journey-tolkien" name="tolkien" value="comet-tab-panel-id--the-hobbit-an-unexpected-journey-tolkien" checked>
<div class="comet-tab__panel">
    <h1>The Hobbit: An Unexpected Journey</h1>
    <img src="http://placehold.it/400x400/3E575F" alt="">
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--the-hobbit-the-desolation-of-smaug-tolkien" name="tolkien" value="comet-tab-panel-id--the-hobbit-the-desolation-of-smaug-tolkien">
<div class="comet-tab__panel">
    <h1>The Hobbit: The Desolation of Smaug</h1>
    <img src="http://placehold.it/400x400/524633" alt="">
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--the-hobbit-the-battle-of-the-five-armies-tolkien" name="tolkien" value="comet-tab-panel-id--the-hobbit-the-battle-of-the-five-armies-tolkien">
<div class="comet-tab__panel">
    <h1>The Hobbit: The Battle of the Five Armies</h1>
    <img src="http://placehold.it/400x400/AA6224" alt="">
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--lord-of-the-rings-the-fellowship-of-the-ring-tolkien" name="tolkien" value="comet-tab-panel-id--lord-of-the-rings-the-fellowship-of-the-ring-tolkien">
<div class="comet-tab__panel">
    <h1>Lord of the Rings: The Fellowship of the Ring</h1>
    <img src="http://placehold.it/400x400/383717" alt="">
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--lord-of-the-rings-the-two-towers-tolkien" name="tolkien" value="comet-tab-panel-id--lord-of-the-rings-the-two-towers-tolkien">
<div class="comet-tab__panel">
    <h1>Lord of the Rings: The Two Towers</h1>
    <img src="http://placehold.it/400x400/6E414A" alt="">
</div>
<input class="comet-tab__input" type="radio" id="comet-tab-panel-id--lord-of-the-rings-the-return-of-the-king-tolkien" name="tolkien" value="comet-tab-panel-id--lord-of-the-rings-the-return-of-the-king-tolkien">
<div class="comet-tab__panel">
    <h1>Lord of the Rings: The Return of the King</h1>
    <img src="http://placehold.it/400x400/171E46" alt="">
</div>
                
<img src="/images/components/tab/snow.jpg" alt="" style="width: 100%;">
{{ comet.tabs(name="tolkien", type="horizontal-sliding", class="comet-tabs--no-sliding-border comet-tabs--overlay-above", labels=["The Hobbit: An Unexpected Journey", "The Hobbit: The Desolation of Smaug", "The Hobbit: The Battle of the Five Armies", "Lord of the Rings: The Fellowship of the Ring", "Lord of the Rings: The Two Towers", "Lord of the Rings: The Return of the King"]) }}
{% call comet.tab_panel(active=true, label="The Hobbit: An Unexpected Journey", name="tolkien") %}
    <h1>The Hobbit: An Unexpected Journey</h1>
    <img src="http://placehold.it/400x400/3E575F" alt="">
{% endcall %}
{% call comet.tab_panel(label="The Hobbit: The Desolation of Smaug", name="tolkien") %}
    <h1>The Hobbit: The Desolation of Smaug</h1>
    <img src="http://placehold.it/400x400/524633" alt="">
{% endcall %}
{% call comet.tab_panel(label="The Hobbit: The Battle of the Five Armies", name="tolkien") %}
    <h1>The Hobbit: The Battle of the Five Armies</h1>
    <img src="http://placehold.it/400x400/AA6224" alt="">
{% endcall %}
{% call comet.tab_panel(label="Lord of the Rings: The Fellowship of the Ring", name="tolkien") %}
     <h1>Lord of the Rings: The Fellowship of the Ring</h1>
    <img src="http://placehold.it/400x400/383717" alt="">
{% endcall %}
{% call comet.tab_panel(label="Lord of the Rings: The Two Towers", name="tolkien") %}
    <h1>Lord of the Rings: The Two Towers</h1>
    <img src="http://placehold.it/400x400/6E414A" alt="">
{% endcall %}
{% call comet.tab_panel(label="Lord of the Rings: The Return of the King", name="tolkien") %}
    <h1>Lord of the Rings: The Return of the King</h1>
    <img src="http://placehold.it/400x400/171E46" alt="">
{% endcall %}
                
Macro params reference

Guidelines

Use When

  • Displaying alternate views of the same or similar content
  • Displaying related content within a larger context (a chapter within a concept)

Don't Use When

  • Comparing related content. Use a Grid to display content side-by-side.
  • Tab content is unrelated, use links and navigation instead.

Class Reference

Class Applies to Outcome

.comet-tabs--more

.comet-tabs

Sets styles and triggers javascript for the more menu responsive behavior

.comet-tabs--horizontal-sliding

.comet-tabs

Sets styles and triggers javascript for the horizontal sliding responsive behavior

.comet-tabs--no-sliding-border

.comet-tabs

Prevents a 1px hairline border from appearing when the horizontal sliding behavior is enabled

.comet-tabs--stacking

.comet-tabs

Sets styles and triggers javascript for the stacking responsive behavior

.comet-tabs--on-dark

.comet-tabs

Changes tab label text color to white

.comet-tabs--top-overlay

.comet-tabs

Sets a negative margin on the tabs to “pull them up” on top of the previous element

Macro Reference

Two macros are used to compose a tab set:

  • tabs()
  • tab_panel().

tabs

Parameter Values Description

labels

an array of strings, default: [“Tab 1”, “Tab 2”]

An array of strings or objects that will be the labels of the tabs. An array of objects containing both the label text and an id can be used if required: [ {label: “Tab 1”, id: “mytab1”},
{label: “Tab 2”, id: “mytab2”} ]

name

string, default: comet-tabs--name

This ties the tabs() component to the corresponding set of tab_panel() components

type

more (default), horizontal-sliding, or stacking

Determines the responsive behavior of the tabs

class

false or string

Space separated classes that will be applied to the outer wrapper of the tabs

tab_panel

Parameter Values Description

label

A string`

String label that must match one of the strings in the labels array of the corresponding tabs() component

name

string, default: comet-tabs--name

This ties the tabs() component to the corresponding set of tab_panel() components

id

false or string

Can be used to link a tab label to a tab panel instead of relying on the text of the label itself. To use this functionality an array of objects must be passed as the labels parameter to the tabs() component

active

true or false (default)

If true, this will be the selected tab when the tabs load. Only set one active tab_panel per set of tabs.

Navigation Menu