The Alpha Theme includes a set of lightweight utility classes to speed up your design workflow. These classes allow you to apply complex styles – like glass effects, text truncation, or animated gradients – instantly without writing new code for every element.
How to Apply These Classes
For most blocks, you apply these classes in the standard “Additional CSS class(es)” field:
- Select the Kadence Block you want to style.
- Go to the Advanced tab in the right sidebar.
- Scroll down to Advanced > Additional CSS class(es).
- Type the class name (without the dot).
Exception: The Back Button works differently and uses the HTML anchor field (see section below).
1. Typography & Headings
XL Heading
The xl-heading class creates massive, prominent headings. It uses fluid typography to scale perfectly from mobile to desktop. Perfect for hero sections.
Usage
Block: Text (Adv) or Heading
Class: xl-heading
LG Heading
The lg-heading class offers a large font size that is slightly smaller than the XL version. Ideal for major section titles.
Usage
Block: Text (Adv) or Heading
Class: lg-heading
SM Heading
The sm-heading class sets the text to a standardized large size with relaxed line height. Great for subtitles or introductory paragraphs.
Usage
Block: Text (Adv) or Heading
Class: sm-heading
Truncate Text
The truncate-text class cuts off text to a single line with an ellipsis (…) when the content is too long for its container. This is ideal for product summaries or blog post previews in a grid.
Usage
Block: Text (Adv) or Paragraph
Class: truncate-text
2. Text Effects & Highlights
These classes work best when combined with the Kadence “Highlight” feature in the Advanced Text block.
Animated Text Gradient
Applies a moving gradient animation to any text you have highlighted within an Advanced Text block. It creates an eye-catching “shimmering” effect.
Usage
Block: Text (Adv) with “Highlight” enabled
Class: animated-text-gradient
Gold Gradient
Instantly turns your text highlight into a sophisticated gold gradient. This is a global utility, ensuring all your gold accents look exactly the same across the site.
Usage
Block: Text (Adv) with “Highlight” enabled
Class: gold-gradient
Text Highlight Blur
Adds a frosted glass blur effect behind the text highlight. This improves readability if you are placing text over a busy image.
Usage
Block: Text (Adv) with “Highlight” enabled
Class: text-highlight-blur
Price Strikethrough
Styles a price to look like an “old price” (crossed out). There are two versions depending on your background color.
price-strikethrough: Uses your Palette 5 color (usually dark/accent).price-strikethrough-white: Uses your Palette 6 color (usually white/light).
Usage
Block: Text (Adv)
Class: price-strikethrough
3. Buttons & Interactions
Glass Button
Applies the modern “glass” effect to buttons (frosted background with blur). You only need to add this single class, regardless of which color scheme you want to use.
You can customize the glass button design in the Customier > Additional CSS. Learn more about it in this article.
Usage
Block: Buttons (Adv) > Single Button
Class: glass-button
Back Button
Turns any button into a functional “Go Back” trigger. When clicked, it mimics the browser’s back button behavior.
Usage
Block: Buttons (Adv) > Single Button
Field: Advanced > HTML anchor (Not CSS class!)
Value: back-button
Outline on Hover
Adds a solid border outline when the user hovers over an element. Great for product cards or clickable containers.
Usage
Block: Section, Row, or Column
Class: outline-on-hover
Offset Outline on Hover
Similar to the standard outline, but this one creates a negative offset, meaning the border appears inside the element for a stylish framing effect.
Usage
Block: Section, Row, or Column
Class: offset-outline-on-hover
4. Images & Backgrounds
Object Fit Image
Forces an image to fill 100% of its container height and cover the area without stretching. This is essential for aligning images in columns where the containers have different heights.
Usage
Block: Advanced Image
Class: object-fit-image
Image Blur
Applies a slight blur filter to the image itself. This can be used for decorative background images where you don’t want the detail to distract from the content.
Usage
Block: Advanced Image
Class: image-blur
Overlay Blur
Adds a frosted-glass blur effect to the background overlay of a row or section. Unlike ‘Image Blur’, this blurs the overlay layer, making text on top much more readable.
Usage
Block: Row Layout or Section (Background Overlay settings)
Class: overlay-blur
