Components
Tabs
Tab navigation samples.
Basic tab: Overview content with simple pill styling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus nibh ac iaculis gravida. Mauris sed eros non lorem viverra rhoncus.
- Extended copy to fill the card and preview scroll.
- Use this area to describe overview details.
- Responsive and works without JavaScript.
Basic tab: Activity content with simple pill styling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus nibh ac iaculis gravida. Mauris sed eros non lorem viverra rhoncus.
- Extended copy to fill the card and preview scroll.
- Use this area to describe activity details.
- Responsive and works without JavaScript.
Basic tab: Settings content with simple pill styling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus nibh ac iaculis gravida. Mauris sed eros non lorem viverra rhoncus.
- Extended copy to fill the card and preview scroll.
- Use this area to describe settings details.
- Responsive and works without JavaScript.
Bordered tab: Profile content with subtle ring and additional copy for depth. Cras finibus magna a quam vestibulum, non vehicula nisl feugiat.
Vivamus ut dictum velit. Duis auctor, arcu a auctor placerat, tortor leo iaculis nunc, et aliquet risus tellus id sem.
Bordered tab: Billing content with subtle ring and additional copy for depth. Cras finibus magna a quam vestibulum, non vehicula nisl feugiat.
Vivamus ut dictum velit. Duis auctor, arcu a auctor placerat, tortor leo iaculis nunc, et aliquet risus tellus id sem.
Bordered tab: Team content with subtle ring and additional copy for depth. Cras finibus magna a quam vestibulum, non vehicula nisl feugiat.
Vivamus ut dictum velit. Duis auctor, arcu a auctor placerat, tortor leo iaculis nunc, et aliquet risus tellus id sem.
Icon border tab: Updates details live here with richer context and explanatory text spanning multiple lines.
Morbi gravida, nibh vel congue bibendum, erat dui rhoncus sem, at feugiat purus erat non orci.
Icon border tab: Security details live here with richer context and explanatory text spanning multiple lines.
Morbi gravida, nibh vel congue bibendum, erat dui rhoncus sem, at feugiat purus erat non orci.
Icon border tab: Audit details live here with richer context and explanatory text spanning multiple lines.
Morbi gravida, nibh vel congue bibendum, erat dui rhoncus sem, at feugiat purus erat non orci.
Boxed tab: Inbox content with soft background and extended description. Etiam congue lacus id risus porta egestas.
Sed quis lorem in ex rhoncus tristique sit amet sed lacus. Nulla dictum tellus a urna tristique efficitur.
Boxed tab: Mentions content with soft background and extended description. Etiam congue lacus id risus porta egestas.
Sed quis lorem in ex rhoncus tristique sit amet sed lacus. Nulla dictum tellus a urna tristique efficitur.
Boxed tab: Archive content with soft background and extended description. Etiam congue lacus id risus porta egestas.
Sed quis lorem in ex rhoncus tristique sit amet sed lacus. Nulla dictum tellus a urna tristique efficitur.
Deploys status
This dark boxed tab includes an icon and extra body content to fill the card. Track environments, alerts, or release notes here.
- Live metrics and uptime
- Recent changes and incidents
- Owner: Platform squad
Monitoring status
This dark boxed tab includes an icon and extra body content to fill the card. Track environments, alerts, or release notes here.
- Live metrics and uptime
- Recent changes and incidents
- Owner: Platform squad
Changelog status
This dark boxed tab includes an icon and extra body content to fill the card. Track environments, alerts, or release notes here.
- Live metrics and uptime
- Recent changes and incidents
- Owner: Platform squad
Boxed + icon tab: Deploys stream data goes here with longer explanatory content to fill the card. Quisque non feugiat sapien. Fusce interdum tellus non dui sollicitudin, a sollicitudin dui convallis.
Suspendisse potenti. Integer hendrerit quam sed nulla ultricies, quis volutpat erat dapibus.
Boxed + icon tab: Errors stream data goes here with longer explanatory content to fill the card. Quisque non feugiat sapien. Fusce interdum tellus non dui sollicitudin, a sollicitudin dui convallis.
Suspendisse potenti. Integer hendrerit quam sed nulla ultricies, quis volutpat erat dapibus.
Boxed + icon tab: Logs stream data goes here with longer explanatory content to fill the card. Quisque non feugiat sapien. Fusce interdum tellus non dui sollicitudin, a sollicitudin dui convallis.
Suspendisse potenti. Integer hendrerit quam sed nulla ultricies, quis volutpat erat dapibus.