Misc

Z-Index Classes

These classes set the z-index of an element to control its stacking order.

Class Name Description CSS Code
.z-index-2 Z-Index: 2 z-index: 2;
.z-index-3 Z-Index: 3 z-index: 3;
.z-index-4 Z-Index: 4 z-index: 4;
.z-index-5 Z-Index: 5 z-index: 5;

Overflow Classes

These classes set the overflow property of an element.

Class Name Description CSS Code
.overflow-hidden Overflow hidden overflow: hidden;
.overflow-auto Overflow auto overflow: auto;
.overflow-scroll Overflow scroll overflow: scroll;
.overflow-visible Overflow visible overflow: visible;

Display and Opacity Classes

These classes control the display and opacity of elements.

Class Name Description CSS Code
.hidden, .d-none Hide element display: none;
.opacity-50 50% Opacity opacity: 0.5;
.opacity-75 75% Opacity opacity: 0.75;
.opacity-25 25% Opacity opacity: 0.25;

Box Sizing Class

This class changes the box-sizing property of an element.

Class Name Description CSS Code
.content-box Content box model box-sizing: content-box;

Fade Classes

These classes control the opacity and provide a transition effect for fading elements in or out.

Class Name Description CSS Code
.fade-out Fade out effect opacity: 0; transition: opacity 0.5s ease;
.fade-in Fade in effect opacity: 1; transition: opacity 0.5s ease;

Border Radius Classes

These classes apply border-radius to specific sides of an element.

Class Name Description CSS Code
.br-left Left border-radius border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius;
.br-right Right border-radius border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius;

Line Clamp Classes

These classes limit the number of lines an element can display.

Class Name Description CSS Code
.line-clamp-1 1 line clamp overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
.line-clamp-2 2 lines clamp overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
.line-clamp-3 3 lines clamp overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
.line-clamp-4 4 lines clamp overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
.line-clamp-5 5 lines clamp overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
.line-clamp-6 6 lines clamp overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
.line-clamp-none No line clamp overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none;

Additional Utility Classes

Additional utility classes for various purposes.

Class Name Description CSS Code
.hero-section Hero section padding padding-top: 65px; padding-bottom: 65px;
.border-top-0 No top border border-top: none;
.border-bottom-0 No bottom border border-bottom: none;
.mobile:gap-0 No gap on mobile devices gap:0;
.mobile:two-up Two columns on mobile devices --
.mobile:thin Displays content in 16/9 on mobile devices --
.overlay Dark overlay on image --

sr-only Class Documentation

The .sr-only class is designed to visually hide content on a webpage while keeping it accessible to screen readers.

Usage

Add this class to any HTML element whose content should be accessible to screen readers but not visible on the screen. Common use cases include skip links and form labels for visually impaired users.

Example

<a href="#maincontent" class="sr-only">Skip to main content</a>

This link, "Skip to main content," is not visible to sighted users but is read by screen readers, allowing users with visual impairments to skip directly to the main content of the page.

Best Practices

  • Use .sr-only for content that is only meant for screen readers.
  • Do not use .sr-only to hide content that should be accessible to all users.
  • Regularly test your website with screen readers to ensure the .sr-only class is being used effectively and the content is accessible.