HTML

Skip to content

ExamplesDocumentationCSS Variables

Examples

Skip to content

This Preview can only be accessed in full page mode.
Copied to clipboard

Documentation

Overview

Skip to content allows screen reader and keyboard users to bypass navigation rather than tabbing through it.

When using .pf-c-skip-to-content you must also provide an anchor with the matching id that is applied to the href attribute of .pf-c-skip-to-content. You will typically place this just before the main content of the page. Ex: <a id="main-content"></a> For a demo of this see the page demo.

Usage

Class Applied to Outcome
.pf-c-skip-to-content <a> initiates the skip to content link.
.pf-m-focus .pf-c-skip-to-content Forces display of the focus state. This state is primarily for demonstration purposes and would not normally be used in lieu of the :focus pseudo-class.

CSS Variables

--pf-c-skip-to-content--Topc_skip_to_content_Top1rem
--pf-c-skip-to-content--ZIndexc_skip_to_content_ZIndex600
--pf-c-skip-to-content--focus--Leftc_skip_to_content_focus_Left1rem