Links can be presented as buttons and within other elements. On pages with a lot of content, links can be included within section headings.
-
-
<h2 class="flex align-items-baseline justify-content-between pb-2 my-4 border-bottom"> Section title <a class="font-size-base" href="#page-container"> Back to top <svg class="svg-icon text-inherit fill-current" viewBox="0 0 324 423" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M317,177 C312,182 307,184 301,184 C296,184 290,182 286,177 L184,76 L184,401 C184,413 174,423 162,423 C150,423 140,413 140,401 L140,76 L38,177 C30,186 16,186 7,177 C-2,169 -2,155 7,146 L146,7 C155,-2 169,-2 177,7 L316,146 C326,155 326,169 317,177 Z"></path> </svg> </a> </h2>
Small screen sizes
You may choose to display links only on small screen sizes by using our responsive display utilities.
Reveal on scroll
Links can also adopt a fixed position on the screen (for example, the bottom-right) and revealed when the visitor scrolls beyond a certain position on the page. The pattern below also contains custom JavaScript to smooth scroll the page back to the top.
Sticky Table of Contents can also be used to provide visitors with information about where they are on the page and a means of easily navigating between sections.