Tabs

Tabs are a component that subdivides page content into panes, which are displayed individually based upon which tab is active. They typically span the entire container width, and the active tab is clearly indicated.

Coded Components

Helper classes: Looking for a complete list of helper classes for these components?View helper classes

Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.

Standard Tabs

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container"> <ul class="dds__tabs dds__mb-4" role="tablist" aria-label="Example description of tabs"> <li role="none"> <button id="home-tab-default" class="dds__tab-link dds__active" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home-default" aria-selected="true"> Home <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile-tab-default" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile-default" aria-selected="false"> Profile <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact-tab-default" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact-default" aria-selected="false"> Contact <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> <div class="dds__tab-content"> <div id="home-default" class="dds__tab-pane dds__fade dds__show dds__active" role="tabpanel" tabindex="0" aria-labelledby="home-tab-default"> <p>Home content</p> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="tab-emailInput-validation">Email label</label> <input type="email" class="dds__form-control" maxlength="256" name="email" id="tab-emailInput-validation" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-emailInput-validationFeedback"> Please enter your email. </div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="tab-firstnameInput-validation">First name</label> <input type="text" class="dds__form-control" id="tab-firstnameInput-validation" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-firstnameInput-validationFeedback"> Please enter your first name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="tab-lastnameInput-validation">Last name</label> <input type="text" class="dds__form-control" id="tab-lastnameInput-validation" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-lastnameInput-validationFeedback"> Please enter your last name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="tab-usernameInput-validation">Username</label> <input type="text" class="dds__form-control" id="tab-usernameInput-validation" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-usernameInput-validationFeedback"> Please choose a username. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="tab-cityInput-validation">City</label> <input type="text" class="dds__form-control" id="tab-cityInput-validation" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-cityInput-validationFeedback"> Please provide a valid city. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="tab-stateInput-validation">State</label> <input type="text" placeholder="texas" class="dds__form-control" id="tab-stateInput-validation" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-stateInput-validationFeedback"> Please provide a valid state. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="tab-zipcodeInput-validation">Zip</label> <input id="tab-zipcodeInput-validation" type="text" placeholder="#####" pattern="[1-9]{1}[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="XXXXX" required pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="tab-zipcodeInput-validationFeedback"> Please provide a valid zip. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="tab-phoneInput-validation">Phone</label> <input id="tab-phoneInput-validation" type="text" placeholder="(___) ___-____" set-cursor="1" pattern="\([1-9]{1}[0-9]{2}\) [0-9]{3}-[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="(XXX) XXX-XXXX" required /> <div class="dds__invalid-feedback" id="tab-phoneInput-validationFeedback"> Please provide a valid phone. </div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="profile-default" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile-tab-default"><p>Profile content</p></div> <div id="contact-default" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact-tab-default"><p>Contact content</p></div> </div> </div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. --> <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"></div> </div> </div>
</div>

Standard Tabs (Single Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow"> <ul class="dds__tabs dds__mb-4" role="tablist" aria-label="Example description of tabs"> <li role="none"> <button id="home-tab-single" class="dds__tab-link dds__active" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home4" aria-selected="true"> Home <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile-tab-single" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile4" aria-selected="false"> Profile <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact-tab-single" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact4" aria-selected="false"> Contact <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="home-tab-single1" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home5" aria-selected="true"> Home (1) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile-tab-single1" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile5" aria-selected="false"> Profile (1) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact-tab-single1" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact5" aria-selected="false"> Contact (1) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="home-tab-single2" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home6" aria-selected="true"> Home (2) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile-tab-single2" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile6" aria-selected="false"> Profile (2) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact-tab-single2" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact6" aria-selected="false"> Contact (2) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="home-tab-single3" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home7" aria-selected="true"> Home (3) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile-tab-single3" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile7" aria-selected="false"> Profile (3) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact-tab-single3" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact7" aria-selected="false"> Contact (3) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul>
</div>
<div class="dds__tab-content"> <div id="home4" class="dds__tab-pane dds__fade dds__show dds__active" role="tabpanel" tabindex="0" aria-labelledby="home-tab-single"><p>Home content</p></div> <div id="profile4" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile-tab-single"><p>Profile content</p></div> <div id="contact4" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact-tab-single"><p>Contact content</p></div> <div id="home5" class="dds__tab-pane dds__fade " role="tabpanel" tabindex="0" aria-labelledby="home-tab-single1"><p>Home content</p></div> <div id="profile5" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile-tab-single1"><p>Profile content</p></div> <div id="contact5" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact-tab-single1"><p>Contact content</p></div> <div id="home6" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="home-tab-single2"><p>Home content</p></div> <div id="profile6" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile-tab-single2"><p>Profile content</p></div> <div id="contact6" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact-tab-single2"><p>Contact content</p></div> <div id="home7" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="home-tab-single3"><p>Home content</p></div> <div id="profile7" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile-tab-single3"><p>Profile content</p></div> <div id="contact7" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact-tab-single3"><p>Contact content</p></div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Standard Tabs (Pagination Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow" data-type="page"> <ul class="dds__tabs dds__mb-4" role="tablist" aria-label="Example description of tabs"> <li role="none"> <button id="home-tab" class="dds__tab-link dds__active" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home8" aria-selected="true"> Home <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile8" aria-selected="false"> Profile <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact8" aria-selected="false"> Contact <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="home2-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home9" aria-selected="true"> Home (1) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile2-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile9" aria-selected="false"> Profile (1) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact2-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact9" aria-selected="false"> Contact (1) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="home3-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home10" aria-selected="true"> Home (2) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile3-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile10" aria-selected="false"> Profile (2) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact3-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact10" aria-selected="false"> Contact (2) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="home4-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="home11" aria-selected="true"> Home (3) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="profile4-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="profile11" aria-selected="false"> Profile (3) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li role="none"> <button id="contact4-tab" class="dds__tab-link" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="contact11" aria-selected="false"> Contact (3) <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul>
</div>
<div class="dds__tab-content"> <div id="home8" class="dds__tab-pane dds__fade dds__show dds__active" role="tabpanel" tabindex="0" aria-labelledby="home-tab"><p>Home content</p></div> <div id="profile8" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile-tab"><p>Profile content</p></div> <div id="contact8" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact-tab"><p>Contact content</p></div> <div id="home9" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="home2-tab"><p>Home content</p></div> <div id="profile9" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile2-tab"><p>Profile content</p></div> <div id="contact9" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact2-tab"><p>Contact content</p></div> <div id="home10" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="home3-tab"><p>Home content</p></div> <div id="profile10" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile3-tab"><p>Profile content</p></div> <div id="contact10" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact3-tab"><p>Contact content</p></div> <div id="home11" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="home4-tab"><p>Home content</p></div> <div id="profile11" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="profile4-tab"><p>Profile content</p></div> <div id="contact11" class="dds__tab-pane dds__fade" role="tabpanel" tabindex="0" aria-labelledby="contact4-tab"><p>Contact content</p></div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Justified Tabs

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container"> <ul class="dds__tabs dds__mb-4" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__active" id="example-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> <div class="dds__tab-content" id="defaultJustifiedTabContent"> <div class="dds__tab-pane dds__fade dds__show dds__active" id="example" tabindex="0" role="tabpanel" aria-labelledby="example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile" tabindex="0" role="tabpanel" aria-labelledby="automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats" tabindex="0" role="tabpanel" aria-labelledby="boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes" tabindex="0" role="tabpanel" aria-labelledby="planes-tab">Planes</div> </div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span class="dds__tab-span_blue">Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Justified Tabs (Single Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow"> <ul class="dds__tabs dds__mb-4" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered dds__active" id="justified-single-example-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example3" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single-automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile3" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single-boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats3" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single-planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes3" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single2-example-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example4" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single2-automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile4" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single2-boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats4" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single2-planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes4" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single3-example-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example5" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single3-automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile5" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single3-boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats5" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-single3-planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes5" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul>
</div>
<div class="dds__tab-content" id="defaultJustifiedTabContentSingle"> <div class="dds__tab-pane dds__fade dds__show dds__active" id="example3" tabindex="0" role="tabpanel" aria-labelledby="justified-single-example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile3" tabindex="0" role="tabpanel" aria-labelledby="justified-single-automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats3" tabindex="0" role="tabpanel" aria-labelledby="justified-single-boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes3" tabindex="0" role="tabpanel" aria-labelledby="justified-single-planes-tab">Planes</div> <div class="dds__tab-pane dds__fade" id="example4" tabindex="0" role="tabpanel" aria-labelledby="justified-single2-example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile4" tabindex="0" role="tabpanel" aria-labelledby="justified-single2-automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats4" tabindex="0" role="tabpanel" aria-labelledby="justified-single2-boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes4" tabindex="0" role="tabpanel" aria-labelledby="justified-single2-planes-tab">Planes</div> <div class="dds__tab-pane dds__fade" id="example5" tabindex="0" role="tabpanel" aria-labelledby="justified-single3-example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile5" tabindex="0" role="tabpanel" aria-labelledby="justified-single3-automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats5" tabindex="0" role="tabpanel" aria-labelledby="justified-single3-boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes5" tabindex="0" role="tabpanel" aria-labelledby="justified-single3-planes-tab">Planes</div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> Back </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Justified Tabs (Pagination Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow" data-type="page"> <ul class="dds__tabs dds__mb-4" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered dds__active" id="justified-page-example-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example6" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page-automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile6" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page-boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats6" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page-planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes6" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page2-example-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example7" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page2-automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile7" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page2-boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats7" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page2-planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes7" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page3-example-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="example8" aria-selected="true"> <span class="dds__tab-span_blue">Example to show the auto adjusted tab height</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page3-automobile-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="automobile8" aria-selected="false"> <span class="dds__tab-span_blue">Automobile</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page3-boats-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="boats8" aria-selected="false"> <span class="dds__tab-span_blue">Boats</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="justified-page3-planes-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="planes8" aria-selected="false"> <span class="dds__tab-span_blue">Planes</span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul>
</div>
<div class="dds__tab-content" id="defaultJustifiedTabContentPage"> <div class="dds__tab-pane dds__fade dds__show dds__active" id="example6" tabindex="0" role="tabpanel" aria-labelledby="justified-page-example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile6" tabindex="0" role="tabpanel" aria-labelledby="justified-page-automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats6" tabindex="0" role="tabpanel" aria-labelledby="justified-page-boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes6" tabindex="0" role="tabpanel" aria-labelledby="justified-page-planes-tab">Planes</div> <div class="dds__tab-pane dds__fade" id="example7" tabindex="0" role="tabpanel" aria-labelledby="justified-page2-example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile7" tabindex="0" role="tabpanel" aria-labelledby="justified-page2-automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats7" tabindex="0" role="tabpanel" aria-labelledby="justified-page2-boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes7" tabindex="0" role="tabpanel" aria-labelledby="justified-page2-planes-tab">Planes</div> <div class="dds__tab-pane dds__fade" id="example8" tabindex="0" role="tabpanel" aria-labelledby="justified-page3-example-tab">Example</div> <div class="dds__tab-pane dds__fade" id="automobile8" tabindex="0" role="tabpanel" aria-labelledby="justified-page3-automobile-tab">Automobile</div> <div class="dds__tab-pane dds__fade" id="boats8" tabindex="0" role="tabpanel" aria-labelledby="justified-page3-boats-tab">Boats</div> <div class="dds__tab-pane dds__fade" id="planes8" tabindex="0" role="tabpanel" aria-labelledby="justified-page3-planes-tab">Planes</div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> Back </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Centered Tabs

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container"> <div class="dds__tabs-centered-container"> <ul class="dds__tabs dds__flex-nowrap dds__tab-centered" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__active" id="inspiron-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron" aria-selected="true"> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="latitude-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude" aria-selected="false"> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="vostro-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro" aria-selected="false"> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="xps-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps" aria-selected="false"> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="precision-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision" aria-selected="false"> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </div> <div class="dds__tab-content dds__mt-4" id="CenteredTabContent"> <div class="dds__tab-pane dds__fade dds__show dds__active" id="inspiron" tabindex="0" role="tabpanel" aria-labelledby="inspiron-tab"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div class="dds__tab-pane dds__fade" id="latitude" tabindex="0" role="tabpanel" aria-labelledby="latitude-tab"> <h4>Latitude Laptops</h4> <p>For business-class security and reliability</p> </div> <div class="dds__tab-pane dds__fade" id="vostro" tabindex="0" role="tabpanel" aria-labelledby="vostro-tab"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div class="dds__tab-pane dds__fade" id="xps" tabindex="0" role="tabpanel" aria-labelledby="xps-tab"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div class="dds__tab-pane dds__fade" id="precision" tabindex="0" role="tabpanel" aria-labelledby="precision-tab"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div> </div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Centered Tabs (Single Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow"> <div class="dds__tabs-centered-container dds__mb-4"> <ul class="dds__tabs dds__flex-nowrap dds__tab-centered" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered dds__active" id="centered-inspiron-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron2" aria-selected="true"> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-latitude-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude2" aria-selected="false"> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-vostro-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro2" aria-selected="false"> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-xps-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps2" aria-selected="false"> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-precision-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision2" aria-selected="false"> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered2-inspiron-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron3" aria-selected="true"> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered2-latitude-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude3" aria-selected="false"> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered2-vostro-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro3" aria-selected="false"> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered2-xps-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps3" aria-selected="false"> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered2-precision-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision3" aria-selected="false"> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </div>
</div>
<div class="dds__tab-content" id="CenteredSingleTabContent"> <div class="dds__tab-pane dds__fade dds__show dds__active" id="inspiron2" tabindex="0" role="tabpanel" aria-labelledby="centered-inspiron-tab"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div class="dds__tab-pane dds__fade" id="latitude2" tabindex="0" role="tabpanel" aria-labelledby="centered-latitude-tab"> <h4>Latitude Laptops</h4> <p>For business-class security and reliability</p> </div> <div class="dds__tab-pane dds__fade" id="vostro2" tabindex="0" role="tabpanel" aria-labelledby="centered-vostro-tab"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div class="dds__tab-pane dds__fade" id="xps2" tabindex="0" role="tabpanel" aria-labelledby="centered-xps-tab"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div class="dds__tab-pane dds__fade" id="precision2" tabindex="0" role="tabpanel" aria-labelledby="centered-precision-tab"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div> <div class="dds__tab-pane dds__fade" id="inspiron3" tabindex="0" role="tabpanel" aria-labelledby="centered2-inspiron-tab"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div class="dds__tab-pane dds__fade" id="latitude3" tabindex="0" role="tabpanel" aria-labelledby="centered2-latitude-tab"> <h4>Latitude Laptops</h4> <p>For business-class security and reliability</p> </div> <div class="dds__tab-pane dds__fade" id="vostro3" tabindex="0" role="tabpanel" aria-labelledby="centered2-vostro-tab"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div class="dds__tab-pane dds__fade" id="xps3" tabindex="0" role="tabpanel" aria-labelledby="centered2-xps-tab"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div class="dds__tab-pane dds__fade" id="precision3" tabindex="0" role="tabpanel" aria-labelledby="centered2-precision-tab"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Centered Tabs (Pagination Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow" data-type="page"> <div class="dds__tabs-centered-container dds__mb-4"> <ul class="dds__tabs dds__flex-nowrap dds__tab-centered" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered dds__active" id="centered-page-inspiron-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron4" aria-selected="true"> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page-latitude-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude4" aria-selected="false"> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page-vostro-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro4" aria-selected="false"> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page-xps-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps4" aria-selected="false"> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page-precision-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision4" aria-selected="false"> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page2-inspiron-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron5" aria-selected="true"> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page2-latitude-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude5" aria-selected="false"> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page2-vostro-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro5" aria-selected="false"> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page2-xps-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps5" aria-selected="false"> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-page3-precision-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision5" aria-selected="false"> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </div>
</div>
<div class="dds__tab-content" id="CenteredPagemyTabContent"> <div class="dds__tab-pane dds__fade dds__show dds__active" id="inspiron4" tabindex="0" role="tabpanel" aria-labelledby="centered-page-inspiron-tab"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div class="dds__tab-pane dds__fade" id="latitude4" tabindex="0" role="tabpanel" aria-labelledby="centered-page-latitude-tab"> <h4>Latitude Laptops</h4> <p>For business-class security and reliability</p> </div> <div class="dds__tab-pane dds__fade" id="vostro4" tabindex="0" role="tabpanel" aria-labelledby="centered-page-vostro-tab"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div class="dds__tab-pane dds__fade" id="xps4" tabindex="0" role="tabpanel" aria-labelledby="centered-page-xps-tab"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div class="dds__tab-pane dds__fade" id="precision4" tabindex="0" role="tabpanel" aria-labelledby="centered-page-precision-tab"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div> <div class="dds__tab-pane dds__fade" id="inspiron5" tabindex="0" role="tabpanel" aria-labelledby="centered-page2-inspiron-tab"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div class="dds__tab-pane dds__fade" id="latitude5" tabindex="0" role="tabpanel" aria-labelledby="centered-page2-latitude-tab"> <h4>Latitude Laptops</h4> <p>For business-class security and reliability</p> </div> <div class="dds__tab-pane dds__fade" id="vostro5" tabindex="0" role="tabpanel" aria-labelledby="centered-page2-vostro-tab"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div class="dds__tab-pane dds__fade" id="xps5" tabindex="0" role="tabpanel" aria-labelledby="centered-page2-xps-tab"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div class="dds__tab-pane dds__fade" id="precision5" tabindex="0" role="tabpanel" aria-labelledby="centered-page3-precision-tab"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Centered Tabs with Image

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container"> <div class="dds__tabs-centered-container"> <ul class="dds__tabs dds__flex-nowrap dds__tab-centered" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__active" id="inspiron1-tab" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron1" aria-selected="true"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="latitude1-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude1" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="vostro1-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro1" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="xps1-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps1" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" id="precision1-tab" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision1" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </div> <div class="dds__tab-content dds__mt-4" id="centeredImageTabContent"> <div id="inspiron1" class="dds__tab-pane dds__fade dds__show dds__active" tabindex="0" role="tabpanel" aria-labelledby="inspiron1-tab"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div id="latitude1" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="latitude1-tab"> <div id="example-accordion" class="dds__accordion dds__mb-3"> <div class="dds__accordion-card"> <div class="dds__accordion-card-header"> <h5 class="dds__mb-0"> <button class="dds__accordion-btn dds__d-flex" type="button" data-toggle="dds__collapse" data-target="#collapseOneNested-tab" aria-expanded="true" aria-controls="collapseOneNested-tab"> <i class="dds__icons dds__chevron-right" aria-hidden="true"></i> <span id="ExampleAccordionHeadline" class="dds__mx-2"> Example Accordion </span> </button> </h5> </div> <div id="collapseOneNested-tab" role="region" class="dds__collapse dds__show" aria-labelledby="ExampleAccordionHeadline" aria-expanded="true"> <div class="dds__accordion-card-body"> The Content Area provides a space for displaying other patterns or content. The Content Area is not part of this pattern. This pattern rather controls the opening and closing of the content area. </div> <div class="dds__accordion-card-body"> <div class="dds__secondary-accordion"> <h5 class="dds__mb-0"> <button aria-label="Show / Hide content for Secondary Accordion" class="dds__secondary-accordion-btn dds__d-flex dds__collapsed" type="button" data-toggle="dds__collapse" data-target="#secondaryAccordion3" aria-expanded="false" aria-controls="secondaryAccordion3" role="button"> <i class="dds__icons dds__arrow-tri-solid-right" aria-hidden="true"></i> <span class="dds__mx-2"> Example Secondary Accordion </span> </button> </h5> <div id="secondaryAccordion3" class="dds__collapse" aria-expanded="true" role="region"> <div class="dds__secondary-accordion-body dds__mb-2"> Anim pariatur cliche reprehenderit </div> </div> </div> </div> </div> </div> </div> </div> <div id="vostro1" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="vostro1-tab"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div id="xps1" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="xps1-tab"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div id="precision1" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="precision1-tab"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div> </div>
</div> <!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Centered Tabs with Image (Single Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow"> <div class="dds__tabs-centered-container dds__mb-4"> <ul class="dds__tabs dds__flex-nowrap dds__tab-centered" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered dds__active" id="inspiron1-centered-single" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron8" aria-selected="true"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="latitude1-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude8" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="vostro1-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro8" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="xps1-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps8" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="precision1-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision8" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="inspiron2-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron9" aria-selected="true"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="latitude2-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude9" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="vostro2-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro9" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="xps2-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps9" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="precision2-centered-single" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision9" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </div>
</div>
<div class="dds__tab-content" id="centeredImageTabContent-single"> <div id="inspiron8" class="dds__tab-pane dds__fade dds__show dds__active" tabindex="0" role="tabpanel" aria-labelledby="inspiron1-centered-single"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div id="latitude8" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="latitude1-centered-single"> <h4>Latitude Laptops</h4> <p>For small business computing</p> </div> <div id="vostro8" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="vostro1-centered-single"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div id="xps8" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="xps1-centered-single"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div id="precision8" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="precision1-centered-single"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div> <div id="inspiron9" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="inspiron2-centered-single"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div id="latitude9" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="latitude2-centered-single"> <h4>Latitude Laptops</h4> <p>For small business computing</p> </div> <div id="vostro9" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="vostro2-centered-single"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div id="xps9" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="xps2-centered-single"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div id="precision9" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="precision2-centered-single"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div>
</div>
<!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Centered Tabs with Image (Pagination Overflow)

<div class="dds__mt-5 dds__mb-5"> <div class="dds__tabs-container dds__container-overflow" data-type="page"> <div class="dds__tabs-centered-container dds__mb-4"> <ul class="dds__tabs dds__flex-nowrap dds__tab-centered" role="tablist" aria-label="Example description of tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered dds__active" id="centered-img-inspiron" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron6" aria-selected="true"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-latitude" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude6" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-vostro" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro6" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-XPS" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps6" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-precision" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision6" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-inspiron2" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="inspiron7" aria-selected="true"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Inspiron Laptops</span> For home and home office </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-latitude2" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="latitude7" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Latitude Laptops</span> For business-class security and reliability </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-vostro2" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="vostro7" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Vostro Laptops</span> For small business computing </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-XPS2" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="xps7" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">XPS Laptops</span> For ultimate experience </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__tab-link-centered" id="centered-img-precision2" tabindex="-1" data-toggle="dds__tab" data-target="#exampleResponsiveTab" role="tab" aria-controls="precision7" aria-selected="false"> <img src="https://via.placeholder.com/80" alt="" /> <span> <span class="dds__h4">Dell Precision Mobile Workstations</span> For professional creators </span> <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </div>
</div>
<div class="dds__tab-content" id="centeredImageTabContent-page"> <div id="inspiron6" class="dds__tab-pane dds__fade dds__show dds__active" tabindex="0" role="tabpanel" aria-labelledby="centered-img-inspiron"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div id="latitude6" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-latitude"> <h4>Latitude Laptops</h4> <p>For small business computing</p> </div> <div id="vostro6" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-vostro"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div id="xps6" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-XPS"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div id="precision6" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-precision"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div> <div id="inspiron7" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-inspiron2"> <h4>Inspiron Laptops</h4> <p>For home and home office</p> </div> <div id="latitude7" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-latitude2"> <h4>Latitude Laptops</h4> <p>For small business computing</p> </div> <div id="vostro7" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-vostro2"> <h4>Vostro Laptops</h4> <p>For small business computing</p> </div> <div id="xps7" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-XPS2"> <h4>XPS Laptops</h4> <p>For ultimate experience</p> </div> <div id="precision7" class="dds__tab-pane dds__fade" tabindex="0" role="tabpanel" aria-labelledby="centered-img-precision2"> <h4>Dell Precision Mobile Workstations</h4> <p>For professional creators</p> </div>
</div>
<!--// Sample Modal used for responsive/mobile tabs. This div only needs to be inserted on the page once to work for all tabs, as long as each tab's data-target matches the modal's id. <div id="exampleResponsiveTab" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"> // intentionally left blank </div> </div>
</div> --> </div>

Usage

Tabs are only used when there are two or more in the set.

When filtering the content of a tab, the filter controls should appear at the top of the active tab panel, beneath the row of tab links.

Tab Links

Content Guidelines

Only images and text may be displayed within a tab link.

  • A tab label is required.
  • A paragraph of supporting text, following the tab label, is optional.
  • An image, preceding the tab label, is optional.

Tab links should use meaningful text that clearly communicates what's within the corresponding tab panel.

Words within a tab link may hyphenate.

If there's insufficient space to display all of the text in a tab link, then truncate using ellipses "...". As always, mouse hover (or hold-press on touchscreen) should reveal the full text within a tooltip.

Overflow Controls

When the tab links exceed the available container width, they are clipped at the right fold.

Overflow controls (left/right arrows) are shown when the tab links are clipped. These function like the controls for filmstrip carousel.

Off-Canvas Modal

On smaller breakpoints, tab links become a vertical option list.

Select one of the options in the vertical list to open an off-canvas modal that contains the tab content.

Tab URL

Selecting a tab (other than the active default) should modify the page URL so that users can easily share or return to the context.

Localization

Tab links become right-aligned, and their order is reversed, for languages that read right-to-left.

Keyboard Interaction

Tab In/Out

When focus moves into a tab list, place focus on the active tab.

When the tab list already has focus, Tab key moves focus to the next element outside the tablist, which is either the first focusable element inside the tab panel or the tab panel itself.

Switching Between Tabs

When the tab list already has focus, Left Arrow moves focus to the previous tab. If focus is on the first tab, move focus to the last tab.

  • If the tabs are in a vertical list on a smaller breakpoint, Up Arrow key performs as Left Arrow described above.

When the tab list already has focus, Right Arrow moves focus to the next tab. If focus is on the last tab element, move focus to the first tab.

  • If the tabs are in a vertical list on a smaller breakpoint, Down Arrow key performs as Right Arrow described above.

Home key moves focus to the first tab.

End key moves focus to the last tab.

Tabs are automatically activated, and their corresponding panel is displayed, when they receive focus.

Do's and Don'ts

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Accessibility

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

Please follow the best practices for tabs from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for tabs from WAI-ARIA 1.1.

You may refer to this example of tabs with automatic activation and this example of tabs with manual activation from WAI-ARIA practices 1.1.