> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: CSS Properties Examples

## Article: CSS Properties Examples

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-properties-examples.md

## Article Content:

# CSS Properties Examples
<blockquote class="caution">

__Alpha:__
Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

</blockquote>



This article provides practical examples of using CSS properties and CSS custom properties in your component manifests.

## Basic CSS property 

A simple text component with standard CSS properties:

```typescript
editorElement: {
  selector: '.text',
  displayName: 'Text',
  cssProperties: {
    color: {
      displayName: 'Text Color',
      defaultValue: '#333333',
    },
    fontSize: {
      displayName: 'Text Size',
      defaultValue: '16px',
    },
    fontFamily: {
      displayName: 'Font',
      defaultValue: 'sans-serif',
    },
  },
}
```

## Basic CSS custom property

A button component using CSS custom properties (CSS variables):

```typescript
editorElement: {
  selector: '.button',
  displayName: 'Button',
  cssCustomProperties: {
    iconSize: {
      cssPropertyType: 'length',
      displayName: 'Icon Size',
      defaultValue: '24px',
    },
    iconColor: {
      cssPropertyType: 'color',
      displayName: 'Icon Color',
      defaultValue: '#ffffff',
    },
  },
}
```

Your component CSS must reference these variables:

```css
.button-icon {
  width: var(--iconSize, 24px);
  height: var(--iconSize, 24px);
  color: var(--iconColor, #ffffff);
}
```

## Nested elements

Both CSS properties and CSS custom properties can be defined on nested elements within your component.

```typescript
editorElement: {
  selector: '.card',
  displayName: 'Card',
  cssProperties: {
    backgroundColor: { defaultValue: '#fff' },
    boxShadow: {},
  },
  elements: {
    title: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.card-title',
        displayName: 'Title',
        cssProperties: {
          font: {},
          color: { defaultValue: '#333' },
        },
      },
    },
  },
}
```

Separate design controls are displayed to users for each element when selected.

## Button component with states

A button showing CSS properties with state variations:

```typescript
editorElement: {
  selector: '.button',
  displayName: 'Button',
  cssProperties: {
    backgroundColor: {
      displayName: 'Background',
      defaultValue: '#007bff',
      statesDefaultValues: {
        disabled: '#cccccc',
      },
    },
    color: {
      displayName: 'Text Color',
      defaultValue: '#ffffff',
      statesDefaultValues: {
        disabled: '#666666',
      },
    },
    borderRadius: {
      displayName: 'Corner Rounding',
      defaultValue: '4px',
    },
  },
  states: {
    disabled: {
      displayName: 'Disabled State',
    },
  },
}
```

## Card component with multiple elements

A card component with nested text, image, a drop shadow filter, and a custom property for content spacing:

```typescript
editorElement: {
  selector: '.card',
  displayName: 'Card',
  cssProperties: {
    backgroundColor: { defaultValue: '#ffffff' },
    borderRadius: { defaultValue: '8px' },
    padding: { defaultValue: '16px' },
    filter: {
      filter: {
        filterFunctions: ['drop_shadow'],
      },
    },
  },
  cssCustomProperties: {
    contentGap: {
      cssPropertyType: 'gap',
      displayName: 'Content Spacing',
      defaultValue: '12px',
    },
  },
  elements: {
    image: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.card-image',
        displayName: 'Image',
        cssProperties: {
          objectFit: { defaultValue: 'cover' },
          borderRadius: { defaultValue: '4px' },
        },
      },
    },
    title: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.card-title',
        displayName: 'Title',
        cssProperties: {
          font: {},
          color: { defaultValue: '#333333' },
        },
      },
    },
    description: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.card-description',
        displayName: 'Description',
        cssProperties: {
          font: {},
          color: { defaultValue: '#666666' },
        },
      },
    },
  },
}
```

Component CSS:

```css
.card {
  display: flex;
  flex-direction: column;
  gap: var(--contentGap, 12px);
}
```

<!-- ## See also -->