Skip to main content

BlockStrap Documentation

BS > Skip Links

Block Description

The BS > Skip Links Block is a specialized block designed to enhance the accessibility of your website. Primarily intended for visitors who use screen readers or keyboard navigation, this block should be placed as the first item in your header. It provides quick links to key sections of your content, such as the main body, navigation, or footer, allowing users to skip over other less relevant sections.

Block Features

The key features of the BS > Skip Links Block include:

  • Up to three customizable skip links.
  • A suite of style options to control the typography and alignment of the link text.
  • The ability to adjust wrapper styles for margin, padding, border color, and shadow.
  • An option to apply additional CSS classes for advanced customization.

Block Options

Content

bs-skip-links-content-2982337
  • Link One
    • TEXT (Text Input): Set the display text for the first skip link.
    • CONTENT ID (Text Input): Input the ID of the content that this link should skip to.
  • Link Two
    • TEXT (Text Input): Set the display text for the second skip link.
    • CONTENT ID (Text Input): Input the ID of the content that this link should skip to.
  • Link Three
    • TEXT (Text Input): Set the display text for the third skip link.
    • CONTENT ID (Text Input): Input the ID of the content that this link should skip to.

Style

bs-skip-links-styles-7174063
  • Typography
    • TEXT COLOR (Dropdown Color Palette): Choose the color of the link text.
    • Text Justify (Checkbox): Enable or disable text justification.
    • TEXT ALIGN (Dropdown): Select the alignment of the link text (left, right, center).

Advanced

bs-skip-links-advanced-1916582
  • Wrapper Styles
    • Margins (Input Fields): Adjust the margin values for the top, right, bottom, and left sides of the block.
    • Padding (Input Fields): Modify the padding values for the top, right, bottom, and left sides of the block.
    • BORDER COLOR (Dropdown Color Palette): Choose the color for the border of the block.
    • SHADOW (Dropdown): Apply a box shadow to the block with selectable intensity.
  • Advanced
    • ADDITIONAL CSS CLASS(ES) (Text Input): Input additional CSS classes that you wish to apply to the block, separated by spaces. These custom classes can then be targeted with additional CSS rules for further customization in your theme or custom CSS file.
Feedback