> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Reusable CSS Classes

Create named component classes in Global Style that apply consistent styles across every Composer widget and Elementor element on your site.


Reusable CSS classes are named style definitions you write once and apply as a class name anywhere on your site. Unlike CSS variables, which store a single value, a class stores a full set of rules: layout, spacing, color, hover state, media queries. Change the class definition once and every element using it updates.

<Callout kind="info">
Free plans get up to **1 other class** in Global Style, separate from the **1 typography class** cap on the [Typography](/uichemy-composer/global-style/typography) page. UiChemy Pro removes both caps. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### What "Other Classes" Covers

The **Others** tab holds any reusable class that isn't a typography class, cards, buttons, containers, layout wrappers, anything you want to define once and apply everywhere. There's no separate structured button builder, every class here is a plain CSS rule set you write yourself, the same way as any other class on this page. If you want a button-like class with a hover state, write it the normal way, using `&:hover` as covered below.

### Adding a CSS Class

1. Select a Composer widget, click **Code** at the top of the panel, open the **Globals** tab, and click any row to open the Globals manager.
2. Under **Classes** in the left sidebar, select **Others** (component and button classes live here, separate from Typography).
3. Click **+ Add** at the top of the manager and pick **Class** (marked **Advanced**). A new entry appears immediately, named **`.class-1`** by default, with an empty CSS body underneath, there's no separate naming dialog.
4. Click the class name field to rename it (for example `uc-blog-card`, only letters, numbers, hyphens, and underscores are allowed), then write the CSS body, see the syntax below.

Changes save automatically as you type, a **Saved ✓** indicator appears at the bottom of the panel. The class is immediately active in the Elementor editor preview and on the front end.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; margin: 1.5rem auto; max-width: 640px; overflow: hidden;">
  <video controls width="100%" style="display: block;">
    <source src="https://res.cloudinary.com/ekxmy1t9/video/upload/v1788952352/uichemy-docs/uichemy-composer/global-style/css-classes/globals-popup.mp4" type="video/mp4" />
  </video>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Globals Manager: variables, typography classes, and other classes</em></p>

### CSS Syntax

The CSS body you write is compiled and emitted as `.your-class-name { … }`. It supports the full range of standard CSS patterns.

**Plain declarations:**

```css
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-card);
background: var(--color-bg-alt);
```

**Pseudo-classes and pseudo-elements.** Use `&` to reference the class itself, or start with `:` and the class name is prepended automatically:

```css
&:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

&:focus-within {
  outline: 2px solid var(--color-brand);
}

/* Starting with : is equivalent */
:hover {
  transform: translateY(-4px);
}
```

**Nested child selectors:**

```css
& .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 4px);
}

& .card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-block: 0.75rem 0.5rem;
}
```

**Media queries:**

```css
padding: var(--space-lg);

@media (max-width: 768px) {
  padding: var(--space-md);
  grid-template-columns: 1fr;
}

@media (max-width: 480px) {
  padding: var(--space-sm);
}
```

**Comments (disabled declarations).** Wrap a property in a CSS comment to disable it, the class editor preserves these:

```css
background: var(--color-bg-alt);
/* border: 1px solid var(--color-border); */
padding: var(--space-md);
```

### Practical Examples

**Layout container, `.uc-boxed`:**

```css
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--space-md);

@media (max-width: 768px) {
  padding-inline: var(--space-sm);
}
```

Apply it to any wrapper to keep content within the site's max width and centered:

```html
<section class="uc-boxed">
  <!-- content -->
</section>
```

**Content container, `.uc-content-width`**, for articles, blog posts, and any prose content that needs a narrower column:

```css
max-width: 680px;
margin-inline: auto;
```

**Blog card, `.uc-blog-card`:**

```css
display: flex;
flex-direction: column;
background: var(--color-bg);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform 0.2s ease, box-shadow 0.2s ease;

&:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

& img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

& .card-body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
```

**Grid layout, `.uc-grid-3`:**

```css
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);

@media (max-width: 900px) {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
  grid-template-columns: 1fr;
}
```

**Section padding, `.uc-section`:**

```css
padding-block: var(--space-xl);

@media (max-width: 768px) {
  padding-block: var(--space-lg);
}
```

### Applying Classes in a Composer Widget

Use the class name directly in the HTML panel:

```html
<section class="uc-section">
  <div class="uc-boxed">
    <div class="uc-grid-3">
      {% for post in get_posts({ posts_per_page: 6 }) %}
        <article class="uc-blog-card">
          <img src="{{ post.thumbnail.src('medium') }}" alt="{{ post.thumbnail.alt }}">
          <div class="card-body">
            <span class="text-label">{{ post.categories.name }}</span>
            <h2 class="text-heading-h3">{{ post.title }}</h2>
            <p class="card-excerpt">{{ post.excerpt|truncate(100) }}</p>
            <a href="{{ post.link }}" class="text-label">Read More →</a>
          </div>
        </article>
      {% endfor %}
    </div>
  </div>
</section>
```

You can also add widget-scoped overrides in the CSS panel if you need to vary a global class for one specific widget:

```css
/* Only applies inside this widget */
.uc-blog-card {
  background: var(--color-brand-light);
}
```

Because a Composer widget's CSS is auto-scoped, this override doesn't change the global `.uc-blog-card` definition, it only affects cards inside this widget.

### Classes vs. CSS Variables

| Aspect | CSS Variables | CSS Classes |
|---|---|---|
| Stores | A single value | A full set of rules |
| Used in | `var(--name)` inside any CSS | `class="name"` in HTML |
| Scope | Global, resolves anywhere | Applied per-element |
| Best for | Colors, sizes, fonts, spacing values | Layout patterns, component styles |

Use both together: define your spacing and color values as variables, then use those variables inside your component classes.

### Editing and Deleting Classes

- **To edit** a class, click its name in the Classes tab, update the CSS body, and click Save.
- **To rename** a class ID, delete the old one and create a new one, then update the HTML in any Composer widgets that referenced the old name.
- **To delete** a class, click the trash icon. This doesn't update widget HTML that already has the class name, those elements simply receive no styling for that class.
- **To temporarily disable** a class, comment out its declarations in the CSS body without deleting the class definition.

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Do global classes apply inside the Elementor editor?" default-open="false">
    Yes. The classes stylesheet is enqueued inside the Elementor editor preview, so you see the correct styling while editing.
  </Expandable>

  <Expandable title="Can I use transition, animation, or @keyframes in a class?" default-open="false">
    Yes. Transitions and animations work normally. For `@keyframes`, define them in the Code tab's Site scope (or in a Composer widget's CSS panel at Site scope) and reference the animation name in the class.
  </Expandable>

  <Expandable title="Can I use the global classes in non-Composer Elementor widgets?" default-open="false">
    Yes. The classes stylesheet is output on every page. Any Elementor widget, or any HTML element anywhere on the page, can use a global class by adding the class name to the element's CSS Classes field or HTML.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Global Style Overview" href="/uichemy-composer/global-style/overview">
    See how classes fit into the whole Global Style system.
  </Card>
  <Card title="CSS Variables" href="/uichemy-composer/global-style/css-variables">
    See the underlying variables your classes are built on.
  </Card>
  <Card title="Typography Classes" href="/uichemy-composer/global-style/typography">
    See a focused example: classes for heading and body text.
  </Card>
  <Card title="Developer Mode" href="/uichemy-composer/build/developer-mode">
    Apply your classes directly in the code you write.
  </Card>
</Columns>