---
url: /card-guides/styles.md
description: >-
  Styles are an advanced Card feature that give you access to CSS-level
  attributes beyond the standard Properties panel, and can be attached to any
  component via its Custom Style property.
---

# Styles

:::warning
Styles are an **advanced** part of Cards. They give you direct access to CSS properties beyond what the standard component Properties panel exposes, and using them well benefits from some familiarity with CSS.
:::

Every card editor gives you access to the **Style Editor**, where you can define named, reusable styles built from CSS attributes. Styles are scoped to the whole model, not the individual card - a style created while editing one card is immediately available to every other card in the model. Once defined, a style can be attached to any component through that component's **Custom Style** property.

## Opening the Style Editor

In the card editor's top toolbar (File / Edit / View / **Styles** / Preview), click **Styles**.

![The Styles button in the card editor toolbar](/card-guides/styles-nav-button.png)

This opens the Style Editor, a three-panel view:

* **Styles** (left) - the list of styles available across the whole model, plus a search box and an **Add Style** button
* **Attributes** (middle) - the CSS attributes added to whichever style is selected
* **Attribute detail** (right) - the value editor for whichever attribute is selected

**Import** and **Export** (bottom left) let you move style definitions in and out of this library. **Close** exits the editor.

![The Style Editor with two custom styles defined](/card-guides/style-editor-overview.png)

A **Root** entry is present by default, alongside any styles you've created with **Add Style** (e.g. `border-sticky`, `hide` above).

## Building a Style

1. Click **Add Style** and give the style a name.

2. Select the style in the list, then click **Add Attribute** to choose a CSS attribute to configure. The list covers most common CSS properties:

   Cursor, Custom Css, Max Height, Color, Font Weight, Font Size, Min Height, Background Color, Border Radius, Border Width, Font Family, Background Image, Border Style, Text Align, Height, Padding, Margin, Letter Spacing, Border Color, Line Height, Transition, Text Transform, Max Width, Width, Opacity, Min Width

   ![Choosing an attribute to add to a style](/card-guides/style-editor-add-attribute.png)

3. Selecting an added attribute opens its detail panel on the right. Most attributes let you set a **Value** independently for the **Default**, **Hover**, **Focus**, **Active**, and **Media** states - e.g. a `Box Shadow` attribute with a `Default` value of `inset 4px 0 0 #e5e7eb`:

   ![Configuring an attribute's value per state](/card-guides/style-editor-attribute-detail.png)

4. Click **Save `<style name>`** to save that individual style. Each style is saved on its own, not the whole library at once.

### Custom Css

`Custom Css` is a special attribute, flagged **for advanced users**, for anything the structured attribute list doesn't cover. Enter raw CSS declarations (property: value pairs, without a selector or braces) - the editor previews them wrapped in the style's own generated rule for context.

![The hide style using a Custom Css attribute set to display: none](/card-guides/style-editor-custom-css.png)

For example, a style named `hide` with a `Custom Css` attribute of `display: none;` produces a style that hides whatever component it's attached to.

## Attaching a Style to a Component

Once a style is saved, select the target component (on any card in the model) and find **Custom Style** in the **Styling** section of its Properties panel. This dropdown lists the styles defined across the model - pick one to attach it. Because styles aren't tied to the card they were created on, you can build a style once and reuse it on any new card you create afterwards.

![The Custom Style property on a Text component](/card-guides/styles-custom-style-property.png)

A Custom Style doesn't necessarily override the component's own properties (Font Color, Font Size, etc.) - it only takes precedence where an attribute genuinely clashes with one already set on the component. Its main use case is giving you access to CSS capabilities the standard Properties panel doesn't expose at all (box shadows, transitions, hover/focus states, raw CSS, and so on).

:::tip
One practical use of a `hide`-style style: the [Filtering and Sorting Tables](/card-guides/table-filtering-and-sorting.html) guide uses a hidden Text component, styled with a `display: none` Custom Style, to feed a filterable column real cube data without displaying it.
:::