Digital Design System
<h2>Tabs with Icons</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="4" tabindex="1">
<div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="5" tabindex="1">
<div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Disabled Tabs with Icons</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="0">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="2">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="3">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="4">
<div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="5">
<div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>2 Tabs</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Donwload Illustration"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Fewer Than 6 Tabs</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Donwload Illustration"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Tabs Without Icons</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="4" tabindex="1">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab" data-index="5" tabindex="1">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Tabs Without Icons Disabled</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
Self-Service & Support Lorem Ipsum Dolorem Pellentesque
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Sticky Tabs With Spacer On Desktop</h2>
<br>
<div class="msds-tabs">
<div class="msds-tabs__sticky-container">
<div class="msds-tabs__container msds-bg-gray-gradient-2">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
<div class="msds-tabs__tab-text">
Small Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
Large Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
Small Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
Large Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="4" tabindex="1">
<div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
<div class="msds-tabs__tab-text">
Small Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="5" tabindex="1">
<div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
<div class="msds-tabs__tab-text">
Large Category Cards
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
<div class="msds-tabs__content-container msds-tabs__content-container--visible msds-bg-white">
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="msds-tabs__content-container msds-bg-white">
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem ipsum dolor sit amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="msds-tabs__content-container msds-bg-white">
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="msds-tabs__content-container msds-bg-white">
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem ipsum dolor sit amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="msds-tabs__content-container msds-bg-white">
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="msds-category-card msds-category-card--small">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="msds-tabs__content-container msds-bg-white">
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem ipsum dolor sit amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Amet consectetur</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-category-card">
<a class="msds-category-card__link" href="#" alt="msds-category-cards">
<div class="msds-category-card__header">
<div class="msds-category-card__header-body">Lorem, ipsum</div>
<div class="msds-category-card__header-icon-container">
<svg class="msds-category-card__header-icon">
<use href="../../msds-spritemap.svg#right-arrow" />
</svg>
</div>
</div>
<div class="msds-category-card__content">
<div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="msds-tabs-other-content"></div>
<h2>Tabs with Icons</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="4" tabindex="1">
<div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="5" tabindex="1">
<div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Disabled Tabs with Icons</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="0">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="2">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="3">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="4">
<div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="5">
<div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>2 Tabs</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Donwload Illustration"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Fewer Than 6 Tabs</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Donwload Illustration"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Tabs Without Icons</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="4" tabindex="1">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab" data-index="5" tabindex="1">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Tabs Without Icons Disabled</h2>
<div class="msds-tabs">
<div class="msds-tabs__container">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
<div class="msds-tabs__tab msds-tabs__tab--disabled">
<div class="msds-tabs__tab-text">
{{tab.placeholderHeading}}
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
</div>
<h2>Sticky Tabs With Spacer On Desktop</h2>
<br>
<div class="msds-tabs">
<div class="msds-tabs__sticky-container">
<div class="msds-tabs__container msds-bg-gray-gradient-2">
<div class="msds-tabs__spacer"></div>
<div class="msds-tabs__tabs-container container">
<div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
<div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
<div class="msds-tabs__tab-text">
Small Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="1" tabindex="1">
<div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
<div class="msds-tabs__tab-text">
Large Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="2" tabindex="1">
<div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
<div class="msds-tabs__tab-text">
Small Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="3" tabindex="1">
<div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
<div class="msds-tabs__tab-text">
Large Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="4" tabindex="1">
<div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
<div class="msds-tabs__tab-text">
Small Category Cards
</div>
</div>
<div class="msds-tabs__tab" data-index="5" tabindex="1">
<div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
<div class="msds-tabs__tab-text">
Large Category Cards
</div>
</div>
</div>
<div class="msds-tabs__spacer"></div>
</div>
<div class="msds-tabs__content-container msds-tabs__content-container--visible msds-bg-white">
{{> @category-small-full-row }}
</div>
<div class="msds-tabs__content-container msds-bg-white">
{{> @category-full-row }}
</div>
<div class="msds-tabs__content-container msds-bg-white">
{{> @category-small-full-row }}
</div>
<div class="msds-tabs__content-container msds-bg-white">
{{> @category-full-row }}
</div>
<div class="msds-tabs__content-container msds-bg-white">
{{> @category-small-full-row }}
</div>
<div class="msds-tabs__content-container msds-bg-white">
{{> @category-full-row }}
</div>
</div>
</div>
<div class="msds-tabs-other-content"></div>
{
"general": null,
"tab": {
"placeholderImg": "",
"placeholderHeading": "Self-Service & Support Lorem Ipsum Dolorem Pellentesque",
"placeholderSmall": "Document and guidance"
}
}
- Handle: @tab-tile
- Preview:
- Filesystem Path: components/tab-tile/tab-tile.hbs
- References (2): @category-small-full-row, @category-full-row
There are no notes for this item.