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.
Horizontal Anchored Nav
<section> <nav class="dds__nav-anchored dds__tabs-container" data-toggle="dds__nav-anchored" data-target="#exampleResponsiveNav" aria-label="Example description of navigation"> <ul class="dds__tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__active" data-target="#section1" aria-controls="section1" aria-selected="true" role="tab"> Section 1 <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" tabindex="-1" data-target="#section2" aria-controls="section2" aria-selected="false" role="tab"> Section 2 <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" tabindex="-1" data-target="#section3" aria-controls="section3" aria-selected="false" role="tab"> Section 3 <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" tabindex="-1" data-target="#section4" aria-controls="section4" aria-selected="false" role="tab"> Section 4 <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" tabindex="-1" data-target="#section5" aria-controls="section5" aria-selected="true" role="tab"> Section 5 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </nav> <div class="dds__nav-content"> <div id="section1" class="dds__pt-5" role="tabpanel" aria-labelledby="section1"> <h2>Section 1</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> <div id="section2" class="dds__pt-5" role="tabpanel" aria-labelledby="section2"> <h2>Section 2</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation">Email label</label> <input type="email" class="dds__form-control" maxlength="256" name="email" id="emailInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="emailInput-validationFeedback"> Please enter your email. </div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation">First name</label> <input type="text" class="dds__form-control" id="firstnameInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback"> Please enter your first name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation">Last name</label> <input type="text" class="dds__form-control" id="lastnameInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback"> Please enter your last name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation">Username</label> <input type="text" class="dds__form-control" id="usernameInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="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="cityInput-validation">City</label> <input type="text" class="dds__form-control" id="cityInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="cityInput-validationFeedback"> Please provide a valid city. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation">State</label> <input type="text" placeholder="texas" class="dds__form-control" id="stateInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="stateInput-validationFeedback"> Please provide a valid state. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation">Zip</label> <input id="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="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="phoneInput-validation">Phone</label> <input id="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="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="section3" class="dds__pt-5" role="tabpanel" aria-labelledby="section3"> <h2>Section 3</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> <div id="section4" class="dds__pt-5" role="tabpanel" aria-labelledby="section4"> <h2>Section 4</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation1">Email label</label> <input type="email" class="dds__form-control" maxlength="256" name="email" id="emailInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="emailInput-validationFeedback1"> Please enter your email. </div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation1">First name</label> <input type="text" class="dds__form-control" id="firstnameInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback1"> Please enter your first name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation1">Last name</label> <input type="text" class="dds__form-control" id="lastnameInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback1"> Please enter your last name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation1">Username</label> <input type="text" class="dds__form-control" id="usernameInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback1"> Please choose a username. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation1">City</label> <input type="text" class="dds__form-control" id="cityInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="cityInput-validationFeedback1"> Please provide a valid city. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation1">State</label> <input type="text" placeholder="texas" class="dds__form-control" id="stateInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="stateInput-validationFeedback1"> Please provide a valid state. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation1">Zip</label> <input id="zipcodeInput-validation1" 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="zipcodeInput-validationFeedback1"> Please provide a valid zip. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="phoneInput-validation1">Phone</label> <input id="phoneInput-validation1" 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="phoneInput-validationFeedback1"> Please provide a valid phone. </div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="section5" class="dds__pt-5" role="tabpanel" aria-labelledby="section5"> <h2>Section 5</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <!-- Optional modal responsive implementation. The div below along with data-target set on the above nav element with the id below will create an off canvas modal version of the tab elements. If reponsive is not wanted then the below div and the data-target on the above nav element can be removed. The below div class=dds__modal-body is intentionally and should be left blank. The content in the above div class=dds__nav-content wil be used programmatically inside the div class=dds__modal-body.
--> <div id="exampleResponsiveNav" 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> <hr style="color: red; z-index: 5;">
</section>
Vertical Anchored Nav
<section> <div class="dds__mb-3 dds__nav-anchored-vertical-container"> <nav class="dds__nav-anchored-vertical dds__tabs-container" data-toggle="dds__nav-anchored-vertical" data-target="#exampleResponsiveVerticalNav"> <ul class="dds__nav-anchored-vertical-list"> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link dds__active" data-target="#verticalSection1" aria-controls="verticalSection1" aria-selected="true" role="tab"> Section 1 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection2" aria-controls="verticalSection2" aria-selected="false" role="tab"> Section 2 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection3" aria-controls="verticalSection3" aria-selected="false" role="tab"> Section 3 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection4" aria-controls="verticalSection4" aria-selected="false" role="tab"> Section 4 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection5" aria-controls="verticalSection5" aria-selected="true" role="tab"> Section 5 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </nav> <div class="dds__nav-anchored-vertical-content"> <div id="verticalSection1" role="tabpanel" aria-label="verticalSection1"> <h2>Section 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum enim tempor nulla lacinia mollis. In commodo elementum mi non auctor. Duis malesuada turpis et urna imperdiet rhoncus. Aenean hendrerit nec diam a porttitor. Nam eleifend sollicitudin ipsum, quis pretium dolor consectetur eu. Aenean nec malesuada leo, a sagittis lorem. Ut vitae ligula sed ex iaculis tincidunt. Pellentesque iaculis sollicitudin dolor, non commodo sem vehicula vitae. Maecenas tristique eget dolor vel placerat. Aenean rutrum, velit eu dictum molestie, velit ante tincidunt quam, at dapibus dui leo vestibulum metus. Phasellus tincidunt velit eros, sed luctus nisl bibendum nec. Donec porttitor pellentesque ipsum, eu dictum ante vestibulum varius. Proin nec iaculis enim, non dapibus enim. Sed neque magna, commodo ut risus convallis, vehicula faucibus dui. Donec vestibulum metus vitae erat aliquam, vel faucibus odio laoreet. Pellentesque venenatis sapien leo. </p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> <div id="verticalSection2" class="dds__pt-5" role="tabpanel" aria-label="verticalSection2"> <h2>Section 2</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation-vnav">Email label</label> <input type="email" id="emailInput-validation-vnav" class="dds__form-control" aria-describedby="" maxlength="256" name="email" required aria-invalid="false" /> <div class="dds__invalid-feedback" id="emailInput-validationFeedback-vnav">Please enter your email.</div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation-vnav">First name</label> <input type="text" id="firstnameInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback-vnav">Please enter your first name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation-vnav">Last name</label> <input type="text" id="lastnameInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback-vnav">Please enter your last name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation-vnav">Username</label> <input type="text" id="usernameInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback-vnav">Please choose a username.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation-vnav">City</label> <input type="text" id="cityInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="cityInput-validationFeedback-vnav">Please provide a valid city.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation-vnav">State</label> <input type="text" id="stateInput-validation-vnav" class="dds__form-control" placeholder="texas" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="stateInput-validationFeedback-vnav">Please provide a valid state.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation-vnav">Zip</label> <input type="text" id="zipcodeInput-validation-vnav" required placeholder="#####" pattern="[1-9]{1}[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="XXXXX" pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="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="phoneInput-validation-vnav">Phone</label> <input id="phoneInput-validation-vnav" 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="phoneInput-validationFeedback-vnav">Please provide a valid phone.</div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="verticalSection3" class="dds__pt-5" role="tabpanel" aria-label="verticalSection3"> <h2>Section 3</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum enim tempor nulla lacinia mollis. In commodo elementum mi non auctor. Duis malesuada turpis et urna imperdiet rhoncus. Aenean hendrerit nec diam a porttitor. Nam eleifend sollicitudin ipsum, quis pretium dolor consectetur eu. Aenean nec malesuada leo, a sagittis lorem. Ut vitae ligula sed ex iaculis tincidunt. Pellentesque iaculis sollicitudin dolor, non commodo sem vehicula vitae. Maecenas tristique eget dolor vel placerat. Aenean rutrum, velit eu dictum molestie, velit ante tincidunt quam, at dapibus dui leo vestibulum metus. Phasellus tincidunt velit eros, sed luctus nisl bibendum nec. Donec porttitor pellentesque ipsum, eu dictum ante vestibulum varius. Proin nec iaculis enim, non dapibus enim. Sed neque magna, commodo ut risus convallis, vehicula faucibus dui. Donec vestibulum metus vitae erat aliquam, vel faucibus odio laoreet. Pellentesque venenatis sapien leo. </p> <p> Curabitur non volutpat massa, ut varius odio. Aenean felis orci, viverra nec auctor ut, molestie et lorem. Fusce laoreet urna augue, dictum maximus magna porttitor quis. In eget risus libero. Quisque sem ligula, dictum ac viverra bibendum, egestas sed erat. Mauris tempor erat a mauris tempus commodo. Quisque volutpat dignissim tortor, non fringilla libero fringilla sed. Aliquam ornare vehicula ullamcorper. Suspendisse urna metus, bibendum eget dictum quis, ullamcorper ac leo. Fusce mattis turpis ac quam fermentum consectetur. Etiam ac sapien non enim fringilla mattis non sed magna. Vestibulum non metus at dolor posuere tempor. In eu nisl blandit, laoreet augue id, posuere lectus. Pellentesque eros metus, faucibus id accumsan a, laoreet eget nibh. Sed a commodo orci. </p> </div> <div id="verticalSection4" class="dds__pt-5" role="tabpanel" aria-label="verticalSection4"> <h2>Section 4</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation1-vnav">Email label</label> <input type="email" id="emailInput-validation1-vnav" class="dds__form-control" maxlength="256" name="email" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="emailInput-validationFeedback1">Please enter your email.</div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation1-vnav">First name</label> <input type="text" id="firstnameInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback1">Please enter your first name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation1-vnav">Last name</label> <input type="text" id="lastnameInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback1">Please enter your last name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation1-vnav">Username</label> <input type="text" id="usernameInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback1-vnav">Please choose a username.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation1">City</label> <input type="text" id="cityInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="cityInput-validationFeedback1-vnav">Please provide a valid city.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation1-vnav">State</label> <input type="text" id="stateInput-validation1-vnav" class="dds__form-control" placeholder="texas" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="stateInput-validationFeedback1-vnav">Please provide a valid state.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation1-vnav">Zip</label> <input id="zipcodeInput-validation1-vnav" class="dds__form-control dds__input-masked" type="text" placeholder="#####" pattern="[1-9]{1}[0-9]{4}" data-charset="XXXXX" required pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="zipcodeInput-validationFeedback1-vnav">Please provide a valid zip.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="phoneInput-validation1-vnav">Phone</label> <input type="text" id="phoneInput-validation1-vnav" class="dds__form-control dds__input-masked" placeholder="(___) ___-____" set-cursor="1" pattern="\([1-9]{1}[0-9]{2}\) [0-9]{3}-[0-9]{4}" data-charset="(XXX) XXX-XXXX" required /> <div class="dds__invalid-feedback" id="phoneInput-validationFeedback1-vnav">Please provide a valid phone.</div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="verticalSection5" class="dds__pt-5" role="tabpanel" aria-label="verticalSection5"> <h2>Section 5</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum enim tempor nulla lacinia mollis. In commodo elementum mi non auctor. Duis malesuada turpis et urna imperdiet rhoncus. Aenean hendrerit nec diam a porttitor. Nam eleifend sollicitudin ipsum, quis pretium dolor consectetur eu. Aenean nec malesuada leo, a sagittis lorem. Ut vitae ligula sed ex iaculis tincidunt. Pellentesque iaculis sollicitudin dolor, non commodo sem vehicula vitae. Maecenas tristique eget dolor vel placerat. Aenean rutrum, velit eu dictum molestie, velit ante tincidunt quam, at dapibus dui leo vestibulum metus. Phasellus tincidunt velit eros, sed luctus nisl bibendum nec. Donec porttitor pellentesque ipsum, eu dictum ante vestibulum varius. Proin nec iaculis enim, non dapibus enim. Sed neque magna, commodo ut risus convallis, vehicula faucibus dui. Donec vestibulum metus vitae erat aliquam, vel faucibus odio laoreet. Pellentesque venenatis sapien leo. </p> <p> Curabitur non volutpat massa, ut varius odio. Aenean felis orci, viverra nec auctor ut, molestie et lorem. Fusce laoreet urna augue, dictum maximus magna porttitor quis. In eget risus libero. Quisque sem ligula, dictum ac viverra bibendum, egestas sed erat. Mauris tempor erat a mauris tempus commodo. Quisque volutpat dignissim tortor, non fringilla libero fringilla sed. Aliquam ornare vehicula ullamcorper. Suspendisse urna metus, bibendum eget dictum quis, ullamcorper ac leo. Fusce mattis turpis ac quam fermentum consectetur. Etiam ac sapien non enim fringilla mattis non sed magna. Vestibulum non metus at dolor posuere tempor. In eu nisl blandit, laoreet augue id, posuere lectus. Pellentesque eros metus, faucibus id accumsan a, laoreet eget nibh. Sed a commodo orci. </p> <p> Integer vitae tellus consectetur tellus tempus tincidunt. Suspendisse potenti. Vivamus vehicula hendrerit ex sit amet ultrices. In et magna consequat, rutrum ligula at, tincidunt orci. Curabitur sagittis ex massa. Suspendisse scelerisque consequat mauris sit amet ornare. Aliquam facilisis metus felis, et lobortis erat egestas nec. Donec tincidunt sagittis ullamcorper. Quisque a velit eget magna lacinia dignissim. Aliquam sed fermentum leo. Nam luctus et ipsum non suscipit. Nunc tristique ligula nisi, sed accumsan magna imperdiet id. Praesent fringilla ligula viverra nisl suscipit, in tincidunt arcu semper. Donec eu varius arcu. Suspendisse posuere ullamcorper tellus, et scelerisque tortor volutpat et. Etiam non arcu nec felis bibendum tristique vitae sit amet est. </p> <p> Vestibulum in semper tellus. Donec ornare purus ac finibus posuere. Duis finibus libero vel lorem laoreet molestie. Quisque sapien libero, egestas et leo at, vehicula finibus lectus. Vivamus efficitur dignissim libero et vehicula. Integer at dui a dui rhoncus pulvinar eu quis tortor. In gravida maximus dolor, nec dictum erat finibus id. Quisque vitae pretium mi. In non dignissim est. Nam at lorem eleifend, fermentum elit non, ornare erat. Fusce sed sapien eu diam fringilla luctus et vitae elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Ut id est non urna rhoncus mollis eu in mauris. Suspendisse mollis fermentum enim, sed mollis nisl dignissim eu. Cras fringilla mi quis tincidunt venenatis. In at luctus leo. Mauris at lacinia ligula, in mollis lacus. Vivamus mi nisi, vestibulum et purus eget, tristique pretium eros. Fusce quis vehicula nunc. Nunc non ex non nisl maximus maximus nec et odio. Pellentesque eu cursus ex. </p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> </div> <!-- Optional modal responsive implementation. The div below along with data-target set on the above nav element with the id below will create an off canvas modal version of the tab elements. If reponsive is not wanted then the below div and the data-target on the above nav element can be removed. The below div class=dds__modal-body is intentionally and should be left blank. The content in the above div class=dds__nav-content wil be used programmatically inside the div class=dds__modal-body.
--> <div id="exampleResponsiveVerticalNav" 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> <hr style="color: red; z-index: 5;" />
</section>
[].forEach.call(document.querySelectorAll("[data-toggle=\"dds__nav-anchored-vertical\"]"), function(element) { new UIC.NavAnchoredVertical(element, { showModal: true, });
});
No items found.
No items found.
Heading
No items found.
Usage
All Anchored Nav
The links within an anchored nav not only navigate to the principal
sections on the page, but also communicate to users what sections
exist, which has proven to improve page scroll.
Alternatively, one or more of the links (such as Deals) within an anchored nav
could navigate to a new page.
The current link within the anchored navbar gains focus when
selected, or when users reach the corresponding page section through scrolling.
On smaller breakpoints, an anchored nav is either hidden, or it
becomes a list of links that open corresponding off canvases (see Tabs on smaller breakpoints). This decision is made by the
content strategist for the page.
Avoid using anchored nav with tab components on the same page because
they look too similar and may provide conflicting off canvas functionality at smaller
breakpoints.
Horizontal Anchored Nav
The links are arranged in a horizontal bar layout.
Its initial position is typically beneath the fold or near the bottom
of the visible content
Anchors to the top of the viewport when users attempt to scroll past
it.
Vertical Anchored Nav
The links are arranged in a vertical bar layout.
Typically anchored to the left of the page content.
Remains on-screen while users scroll.
Do's and Don'ts
Do.
Don't.
Do.
Don't.
Do.
Don't.
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.