To top

Use this "button" to allow the customer to jump directly to the top of the page.

It is a sticky element that floats outside the layout.

Overall styling#

  • The component has a rounded upper left and right corner of 2px.
  • It uses the shadow-default.
TypesAttributesPreview
Defaultbackground-color: basic-white
icon-color: gray-darker		to-top: default
Hover / focusbackground-color: brand-primary-base
icon-color: basic-white		to-top: hover-focus

Recommendations#

  • Extend the footer by 64px to provide enough space for the to-top-button at the end of a website (so elements will not be overlapped).

Spacing & measurements#

TypesAttributesPreview
Horizontal spacingpadding: 16pxhorizontal-spacing
Vertical spacingpadding: 16pxhorizontal-spacing
Sizefixed to 56x56pxwidth
Icon size24x24pxicon size

What can be modified?#

  • Modify to-top buttons to your project needs by changing the icons, shape or color.

Change log#

8.1.0 Fundamental & 8.1.0 Web - 2021-07-22#

Changed#

  • Doc: "To top" | Clean up the documentation for the right structure and sentence case

6.0.0 Fundamental & 6.0.0 Web - 2021-03-22#

Changed#

  • "To top" | Changed symbols: with layer-style settings
  • "To top" | Changed symbols: with radius symbol and layer styles

4.0.0 Core & 4.0.0 Web - 2019-09-30#

Changed#

  • "To top" | Changed description: icon-size from "16x16px" to "24x24px"

3.4.0 Core & 3.4.0 Kit - 2019-08-15#

Changed#

  • "To top" | Changed symbol: naming from "backtotop" to "to-top"