1. Home
  2. Using Blocs
  3. Design
  4. Subclass Reference Guide

Subclass Reference Guide

Buttons

Button Clean

The class that is added to a button when the sidebar button style option Clean is applied.

Button Glossy

The class that is added to a button when the sidebar button style option Glossy is applied.

Button Wire

The class that is added to a button when the sidebar button style option Wire is applied. The key class rules to change for this subclass are border style and background colour.

Button Round

The class that is added to a button when the sidebar button corner option Round is applied. The key class rule to change for this subclass is border-radius.

Button Square

The class that is added to a button when the sidebar button corner option Square is applied. The Key class rule to change for this subclass is border-radius.

Scroll To Top Button

The class used to give the Scroll To Top Button its visual appearance. The key class rule to change for this subclass is the background colour.

Scroll To Top Arrow Icon

The class used to give the scroll to top Arrow Icon its visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class used to give Dropdown Button Menus their visual appearance. The key class rule to change for this subclass is the background colour.

The class used to give Dropdown Button Menu Links their visual appearance. The key class rule to change for this subclass is the text colour.

Special Navigation Background

The class used to give Special Navigation Menus their visual appearance.  The key class rule to change for this subclass is the background colour.

The class used to give Special Navigation Menu Links their visual appearance. The key class rule to change for this subclass is the text colour.

Special Navigation Close Symbol

The class used to give the Special Navigation Menu Close Symbol its visual appearance. The key class rule to change for this subclass is the background colour.

The class can be used to set the colour of navigation bar links that appear within dropdown menus.

The class used to control the image that is located within the logo link found in navigation Blocs. By default the logo image has a max height set to prevent it displaying too big on smaller screens, if you wish to have a bigger logo on specific break points, use this subclass in combination with a larger max height.

Text

Text Width Small

The class that is added to a text object when the sidebar text width option Small is applied. The key class rule to change for this subclass is the max width.

Text Width Medium

The class that is added to a text object when the sidebar text width option Medium is applied. The key class rule to change for this subclass is the max width.

Text Width Large

The class that is added to a text object when the sidebar text width option Large is applied. The key class rule to change for this subclass is the max width.

Images

Image Rounded Small

The class that is added to an image object when the sidebar image style option Rounded Small is applied. The key class rule to change for this subclass is the border radius.

Image Rounded Medium

The class that is added to an image object when the sidebar image style option Rounded Medium is applied. The key class rule to change for this subclass is the border radius.

Image Rounded Large

The class that is added to an image object when the sidebar image style option Rounded Large is applied. The key class rule to change for this subclass is the border radius.

Image Frame Small

The class that is added to an image object when the sidebar image style option Frame Small is applied. The key class rules to change for this subclass are the border radius and the background colour.

Image Frame Medium

The class that is added to an image object when the sidebar image style option Frame Medium is applied. The key class rules to change for this subclass are the border radius and the background colour.

Image Frame Large

The class that is added to an image object when the sidebar image style option Frame Large is applied. The key class rules to change for this subclass are the border radius and the background colour.

The class that gives the standard Blocs Light Box its visual appearance. The key class rules to change for this subclass are the border radius and the background colour.

The class that gives the standard Blocs Light Box Navigation Arrows their visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs Light Box Navigation Previous Arrow its visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs Light Box Navigation Next Arrow its visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs Light Box Close Icon its visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs Light Box Caption Text its visual appearance. The key class rules to change for this subclass are the text colour and size.

The class that gives the standard Blocs Carousel Navigation Arrows their visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs Carousel Navigation Previous Arrow its visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs carousel Navigation Next Arrow its visual appearance. The key class rule to change for this subclass is the SVG stroke colour.

The class that gives the standard Blocs Carousel Slide Indicators (small dots at the bottom of a carousel) their visual appearance. Key class rules to change for this subclass are the border and background colours.

The class that gives the standard Blocs Carousel Active Slide Indicator its visual appearance. The key class rules to change for this subclass are the border and background colours.

Misc

Tooltip Body

The class that gives the standard Blocs Tooltip its visual appearance. The key class rules to change for this subclass are the border radius and background colour.

Dividers

The class that gives the standard Blocs Divider Bric its visual appearance. The key class rule to change for this subclass is the background colour.

Pre-Loader

The class that gives the standard Blocs Pre-Loader screen its visual appearance. The key class rules to change for this subclass are the background colour.

Updated on 17th July 2023

Was this article helpful?

Related Articles