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--19943" 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--19943" 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…
</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…
</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--36749" 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--36749" 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 |
---|---|---|
|
|
Sets styles and triggers javascript for the more menu responsive behavior |
|
|
Sets styles and triggers javascript for the horizontal sliding responsive behavior |
|
|
Prevents a 1px hairline border from appearing when the horizontal sliding behavior is enabled |
|
|
Sets styles and triggers javascript for the stacking responsive behavior |
|
|
Changes tab label text color to white |
|
|
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 |
---|---|---|
|
an array of strings, default: |
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”}, |
|
string, default: |
This ties the |
|
|
Determines the responsive behavior of the tabs |
|
false or string |
Space separated classes that will be applied to the outer wrapper of the tabs |
tab_panel
Parameter | Values | Description |
---|---|---|
|
A string` |
String label that must match one of the strings in the |
|
string, default: |
This ties the |
|
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 |
|
true or false (default) |
If true, this will be the selected tab when the tabs load. Only set one active |