Presets

Presets are named collections of style properties. Applying a preset to a card sets its shape, colours, typography, border, and state appearances in one step, instead of writing all those properties manually.

---

Applying a Preset

type: custom:lcards-button
entity: light.living_room
preset: lozenge

That's it. The preset fills in every visual detail. You can then override any individual property on top:

type: custom:lcards-button
entity: light.living_room
preset: lozenge
style:
  card:
    color:
      background:
        inactive: var(--lcards-gray-dark)

Card-level config values always win; they are layered on top of the preset.

---

Built-in Presets

These tables list every preset in the built-in packs (src/core/packs/style-presets/). A -right variant mirrors its preset (rounded or capped end on the other side). A test (tests/core/presets-doc.test.js) keeps these tables in sync with the packs.

Button (lcards-button)

Preset	Description
base	Foundation every other button preset builds on: minimal styles only
lozenge	Classic LCARS lozenge: rounded ends, primary colour fill
lozenge-right	Lozenge mirrored
bullet	Lozenge rounded on one side only, flat on the other: navigation bullets
bullet-right	Bullet mirrored
capped	Lozenge with one capped end: row labels
capped-right	Capped mirrored
barrel	Square-cornered block
barrel-right	Barrel mirrored
filled	Solid filled button
filled-right	Filled mirrored
outline	Transparent fill with a border outline
outline-right	Outline mirrored
icon	Icon-only button
text-only	Pure text label with no background or border
bar-label-base	Base bar label: a filled bar with a text "break" in it
bar-label-left	Bar label with left-aligned text
bar-label-center	Bar label with centred text
bar-label-right	Bar label with right-aligned text
bar-label-square	Bar label with square corners, for large indicators
bar-label-lozenge	Bar label with rounded ends (pill shape)
bar-label-bullet-left	Bar label rounded on the right, flat on the left
bar-label-bullet-right	Bar label flat on the right, rounded on the left
bar-label-capped-left	Bar label rounded on the left, flat on the right
bar-label-capped-right	Bar label rounded on the right, flat on the left
panel-light	Non-interactive square-cornered panel with a random LCARS label (light)
panel-dark	Non-interactive square-cornered panel with a random LCARS label (dark)

Rendered:

preset: lozenge

YAML

type: custom:lcards-button
entity: light.demo
preset: lozenge
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: lozenge-right

YAML

type: custom:lcards-button
entity: light.demo
preset: lozenge-right
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: bullet

YAML

type: custom:lcards-button
entity: light.demo
preset: bullet
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: bullet-right

YAML

type: custom:lcards-button
entity: light.demo
preset: bullet-right
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: capped

YAML

type: custom:lcards-button
entity: light.demo
preset: capped
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: capped-right

YAML

type: custom:lcards-button
entity: light.demo
preset: capped-right
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: barrel

YAML

type: custom:lcards-button
entity: light.demo
preset: barrel
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: barrel-right

YAML

type: custom:lcards-button
entity: light.demo
preset: barrel-right
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: filled

YAML

type: custom:lcards-button
entity: light.demo
preset: filled
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: filled-right

YAML

type: custom:lcards-button
entity: light.demo
preset: filled-right
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: outline

YAML

type: custom:lcards-button
entity: light.demo
preset: outline
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: outline-right

YAML

type: custom:lcards-button
entity: light.demo
preset: outline-right
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

preset: icon

YAML

type: custom:lcards-button
entity: light.demo
preset: icon
icon: mdi:lightbulb
tap_action:
  action: toggle

preset: text-only

YAML

type: custom:lcards-button
entity: light.demo
preset: text-only
icon: mdi:lightbulb
text:
  label:
    content: MAIN LIGHTS
    show: true
tap_action:
  action: toggle

Real cards with sample entities.Tap a button to toggle the sample light.

preset: bar-label-base

YAML

type: custom:lcards-button
preset: bar-label-base
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-left

YAML

type: custom:lcards-button
preset: bar-label-left
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-center

YAML

type: custom:lcards-button
preset: bar-label-center
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-right

YAML

type: custom:lcards-button
preset: bar-label-right
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-square

YAML

type: custom:lcards-button
preset: bar-label-square
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-lozenge

YAML

type: custom:lcards-button
preset: bar-label-lozenge
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-bullet-left

YAML

type: custom:lcards-button
preset: bar-label-bullet-left
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-bullet-right

YAML

type: custom:lcards-button
preset: bar-label-bullet-right
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-capped-left

YAML

type: custom:lcards-button
preset: bar-label-capped-left
interactive: false
text:
  label:
    content: ENGINEERING

preset: bar-label-capped-right

YAML

type: custom:lcards-button
preset: bar-label-capped-right
interactive: false
text:
  label:
    content: ENGINEERING

Real cards with sample entities.

preset: panel-light

YAML

type: custom:lcards-button
preset: panel-light

preset: panel-dark

YAML

type: custom:lcards-button
preset: panel-dark

Real cards with sample entities.

Slider (lcards-slider)

Preset	Description
base	Foundation every other slider preset builds on
pills-basic	Segmented pill slider
pills-left-border	Pills slider with a left border
pills-left-border-rounded	Pills with a left border and a rounded free end
gauge-basic	Ruler-style gauge for displays and controls
gauge-left-border	Gauge slider with a left border
gauge-left-border-rounded	Gauge with a left border and a rounded free end
shaped-vertical	Vertical shaped slider with exterior text labels (style.shaped.type picks the shape)
shaped-horizontal	Horizontal shaped slider with exterior text labels
picard-gauge-vertical	Picard-style vertical gauge

Rendered:

preset: pills-basic

YAML

type: custom:lcards-slider
entity: light.demo
preset: pills-basic
control:
  attribute: brightness

preset: pills-left-border

YAML

type: custom:lcards-slider
entity: light.demo
preset: pills-left-border
control:
  attribute: brightness

preset: gauge-basic

YAML

type: custom:lcards-slider
entity: light.demo
preset: gauge-basic
control:
  attribute: brightness

preset: gauge-left-border

YAML

type: custom:lcards-slider
entity: light.demo
preset: gauge-left-border
control:
  attribute: brightness

preset: pills-left-border-rounded

YAML

type: custom:lcards-slider
entity: light.demo
preset: pills-left-border-rounded
control:
  attribute: brightness

preset: gauge-left-border-rounded

YAML

type: custom:lcards-slider
entity: light.demo
preset: gauge-left-border-rounded
control:
  attribute: brightness

preset: shaped-vertical

YAML

type: custom:lcards-slider
entity: light.demo
preset: shaped-vertical
control:
  attribute: brightness
grid_options:
  rows: 5

preset: shaped-horizontal

YAML

type: custom:lcards-slider
entity: light.demo
preset: shaped-horizontal
control:
  attribute: brightness

preset: picard-gauge-vertical

YAML

type: custom:lcards-slider
entity: light.demo
preset: picard-gauge-vertical
control:
  attribute: brightness
component: picard
grid_options:
  rows: 7
  columns: 6

Real cards with sample entities.Drag a slider to set the sample light's brightness.

Elbow and select menu

The elbow accepts the button presets above (preset: styles its segments the way it styles a button). Its geometry is chosen separately with elbow.type (header-left, header-right, footer-left, footer-right, and more: see Elbow).

The select menu's preset: is a button preset applied to every option button.

Charts and data grids have no style presets (their preset keys are animation presets).

---

How Presets Compose

When a card loads, preset resolution works in layers:

System defaults
    ↓
Preset values
    ↓
Card config (your YAML)  ← wins on conflict
    ↓
Rule patches (runtime)   ← wins over everything

You only need to specify what differs from the preset. Anything you don't set falls through to the preset, and anything the preset doesn't set falls through to the system default.

---

Browsing Available Presets

The card editor surfaces presets in two ways:

• Config tab → the "Preset" dropdown: shows all presets for the current card type
• Config Panel → Pack Explorer: lists all presets from every installed pack, grouped by card type

---

Packs and Custom Presets

Presets come from content packs. The built-in lcards_buttons and lcards_sliders packs provide the presets listed above. Additional packs (including community packs) can add their own presets; these appear in the editor's preset list automatically once the pack is installed.

See Pack System for how to create packs with custom presets.

---

Related

• Styles: the style: block reference for overriding visual properties
• Rules Engine: rules can patch style properties at runtime, overriding both preset and card config
• Common Card Properties: shared card keys