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; |
| .page-section | Page section padding | padding-top: 50px; padding-bottom: 50px; |
| .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:reverse | Reverses display order on mobile devices | Applies to z-row |
| .mobile:two-up | Two columns on mobile devices | -- |
| .mobile:thin | Displays content in 16/9 on mobile devices | -- |
| .mobile:d-none | Set display:none on elements at mobile resolution and below | Applies to z-col, etc |
| .tablet:d-none | Set display:none on elements at tablet resolution and below | Applies to z-col, etc |
| .tablet:stack | Stacks children at tablet resolution and below | Applies to z-row |
| .overlay | Dark overlay on image | -- |
| .circle-blur | Adds a white background blur to the center of an element | -- |
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-onlyfor content that is only meant for screen readers. - Do not use
.sr-onlyto hide content that should be accessible to all users. -
Regularly test your website with screen readers to ensure the
.sr-onlyclass is being used effectively and the content is accessible.