> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling & Data Attributes

> The data-* attributes, CSS styling tokens, and Light-DOM classes for <dkl-order-goal>

This is the shared reference for `<dkl-order-goal>` — the `data-*` attributes that drive its
behaviour, the `--dkl-og-*` tokens that style it, and the Light-DOM classes you can target.
The [app block](/components/order-goal/app-block) settings map onto these; on a [custom
element](/components/order-goal/web-component) you set them directly.

<Note>
  **Using this reference with the app block**

  When you place the [**DK: Order Goal** app block](/components/order-goal/app-block), it renders
  its own `<dkl-order-goal>` and writes these values for you — so what applies depends on the
  kind of override:

  **Data attributes — No:**
  The block sets every `data-*` itself, from its App block settings and the resolved discount.
  Adding `data-*` to your own markup has no effect on a block instance; they're the configuration
  surface for the [web component](/components/order-goal/web-component) only. To change block
  behaviour, use its [settings](/components/order-goal/app-block).

  **CSS styling tokens — Yes:**
  They're CSS custom properties that inherit through the light DOM, so they style a block exactly
  like a web component. The block's colour / radius / spacing pickers just write the matching
  tokens into a scoped `<style>` rule for you. Any token **not** exposed as a setting (e.g.
  `--dkl-og-marker-size`, `--dkl-og-marker-border-color`) you can still set yourself from your own CSS —
  `:root`, the embed's **Custom CSS** field, or a rule targeting the block.

  **CSS parts — N/A:**
  This component is **light DOM**, so there are **no CSS parts**. Target the
  [Light-DOM classes](#light-dom-classes) below instead — they work the same on a block or a
  web component.
</Note>

<Tip>
  **Token precedence.** A token the block writes from a chosen setting is scoped to the block's
  id (`#dkl-og-{block.id}`), which is more specific than a `:root` rule — so to override *that*
  token, either change the editor setting or match the specificity (target the block element).
  Tokens the block leaves unset fall back to your CSS or the built-in default as normal.
</Tip>

## Data attributes

All optional — on a web component the carrier supplies them by default. Set one to override.

<ParamField body="data-discount-id" type="metaobject handle" default="first eligible">
  Pick a specific order-goal discount's carrier. The `discount-` prefix is optional; place one
  tag per discount to show several.
</ParamField>

<ParamField body="data-cart-total-cents" type="int" default="carrier (render-time subtotal)">
  The baseline cart total.
</ParamField>

<ParamField body="data-money-format" type="string" default="carrier (shop.money_format)">
  Money format for JS-rendered amounts.
</ParamField>

<ParamField body="data-message-template" type="string" default="Spend [amount] more to save [discount] on your order!">
  The spend-more message. `[amount]` and `[discount]` are replaced at runtime.
</ParamField>

<ParamField body="data-success-heading" type="string" default="Winner Winner 🎉">
  Heading shown once every tier is met.
</ParamField>

<ParamField body="data-success-message" type="string" default="You've unlocked all available savings">
  Content shown once every tier is met.
</ParamField>

<ParamField body="data-tier-save-label" type="string" default="Save [discount]">
  Per-tier label; `[discount]` is the placeholder.
</ParamField>

<ParamField body="data-tier-spend-label" type="string" default="when you spend [amount]+">
  Per-tier spend line; `[amount]` is the placeholder.
</ParamField>

<ParamField body="data-layout" type="&#x22;horizontal&#x22; | &#x22;stacked&#x22;" default="horizontal">
  Layout variant. `stacked` arranges markers in a column with the progress bar rotated.
</ParamField>

## CSS styling tokens

<Tabs>
  <Tab title="Layout: Stacked">
    <Frame caption="CSS styling tokens for the DKL Order Goal component - layout: stacked">
      <img src="https://mintcdn.com/discountkit/qPmR0fAEpbjKUETr/images/components/dkl-order-goal-stacked-css-tokens.jpg?fit=max&auto=format&n=qPmR0fAEpbjKUETr&q=85&s=b700732f5181dd89cf5c6ff9b734fd5f" alt="Image highlighting the CSS styling tokens for the DKL Order Goal component - layout: stacked" width="1600" height="1032" data-path="images/components/dkl-order-goal-stacked-css-tokens.jpg" />
    </Frame>
  </Tab>

  <Tab title="Layout: Horizontal">
    <Frame caption="CSS styling tokens for the DKL Order Goal component - layout: horizontal">
      <img src="https://mintcdn.com/discountkit/qPmR0fAEpbjKUETr/images/components/dkl-order-goal-horizontal-css-tokens.jpg?fit=max&auto=format&n=qPmR0fAEpbjKUETr&q=85&s=40341fab9e30c0f4c0725752582cc064" alt="Image highlighting the CSS styling tokens for the DKL Order Goal component - layout: horizontal" width="1600" height="1032" data-path="images/components/dkl-order-goal-horizontal-css-tokens.jpg" />
    </Frame>
  </Tab>
</Tabs>

`<dkl-order-goal>` is styled by a stylesheet loaded site-wide by the embed. Set any token
above the element (`:root`, the embed's Custom CSS, an inline `style`, or the block's scoped
rule).

<ParamField body="--dkl-og-margin-top" default="0">
  Space above the widget (block **Margin top**).
</ParamField>

<ParamField body="--dkl-og-margin-bottom" default="0">
  Space below the widget (block **Margin bottom**).
</ParamField>

<ParamField body="--dkl-og-background" default="var(--dkl-color-background-soft)">
  Card background (block **Background color**).
</ParamField>

<ParamField body="--dkl-og-padding" default="1rem">
  Card padding (block **Padding**).
</ParamField>

<ParamField body="--dkl-og-radius" default="var(--dkl-radius)">
  Card corners (block **Border radius**).
</ParamField>

<ParamField body="--dkl-og-font-size" default="inherit">
  Base font size — emitted only when block **Font sizing** is *Custom*, else inherits the theme.
</ParamField>

<ParamField body="--dkl-og-font-size-mobile" default="var(--dkl-og-font-size)">
  Base font size at ≤749px (block **Font size (mobile)**, Custom only).
</ParamField>

<ParamField body="--dkl-og-text-color" default="var(--dkl-color-text)">
  Card text colour (block **Text color**).
</ParamField>

<ParamField body="--dkl-og-tier-label-color" default="inherit">
  The "Save \[discount]" tier label (block **Tier label color**).
</ParamField>

<ParamField body="--dkl-og-tier-spend-color" default="inherit">
  The "when you spend \[amount]+" tier line (block **Tier spend label color**).
</ParamField>

<ParamField body="--dkl-og-track-color" default="var(--dkl-color-border)">
  Progress track (unfilled bar) colour (block **Track color**).
</ParamField>

<ParamField body="--dkl-og-progress-color" default="var(--dkl-color-accent)">
  Progress fill colour (block **Progress bar color**).
</ParamField>

<ParamField body="--dkl-og-marker-size" default="2rem">
  Tier marker size.
</ParamField>

<ParamField body="--dkl-og-marker-border-color" default="var(--dkl-color-border)">
  Inactive marker border colour.
</ParamField>

<ParamField body="--dkl-og-marker-bg" default="var(--dkl-color-background)">
  Inactive marker fill (block **Icon background (not met)**).
</ParamField>

<ParamField body="--dkl-og-marker-active-color" default="var(--dkl-color-accent)">
  Active (met) marker fill (block **Icon background (met)**).
</ParamField>

<ParamField body="--dkl-og-marker-icon-active-color" default="#ffffff">
  Active marker check-icon colour.
</ParamField>

<Note>
  The marker glyph is set via the `--dkl-og-icon` mask — the [app block](/components/order-goal/app-block)
  swaps it for you through its icon image settings; on a web component you set the mask yourself.
</Note>

<Warning>
  Two further properties are runtime-internal, not theming knobs: `--dkl-og-progress` (the 0–1
  fill fraction the component sets on the track) and `--dkl-og-icon` (the marker's mask). Don't
  author them.
</Warning>

## Light-DOM classes

`<dkl-order-goal>` is all light DOM — **no parts**. Target these classes directly.

<ParamField body="dkl-order-goal" type="host">
  The card (host element).
</ParamField>

<ParamField body=".dkl-order-goal__message" type="class">
  The headline / progress message.
</ParamField>

<ParamField body=".dkl-order-goal__progress" type="class">
  The progress bar (with `.dkl-order-goal__progress-track`; the fill is the track's `::before`).
</ParamField>

<ParamField body=".dkl-order-goal__tiers" type="class">
  The tier row/column.
</ParamField>

<ParamField body=".dkl-order-goal__tier" type="class">
  The wrapper for each tier.
</ParamField>

<ParamField body=".dkl-order-goal__tier-marker" type="class">
  The marker dot (met: `.dkl-order-goal__tier-marker--active`; the icon glyph is its `::before`).
</ParamField>

<ParamField body=".dkl-order-goal__tier-label" type="class">
  The wrapper for the tier label.
</ParamField>

<ParamField body=".dkl-order-goal__tier-text" type="class">
  The "Save \[discount]" text in the tier label.
</ParamField>

<ParamField body=".dkl-order-goal__tier-amount" type="class">
  The "when you spend \[amount]+" text in the tier label.
</ParamField>

## Examples

```css Restyle the progress fill and markers theme={null}
:root {
  --dkl-og-progress-color: #6d28d9;
  --dkl-og-marker-active-color: #6d28d9;
  --dkl-og-track-color: #ede9fe;
}

.dkl-order-goal__tier-marker--active {
  box-shadow: 0 0 0 3px #ede9fe;
}
```

```html Custom messaging theme={null}
<dkl-order-goal
  data-message-template="Add [amount] more for [discount] off!"
  data-success-heading="You did it! 🎉"
  data-success-message="Every reward unlocked"
  data-tier-save-label="[discount] off"
  data-tier-spend-label="at [amount]+"
></dkl-order-goal>
```

## Next steps

<CardGroup cols={2}>
  <Card title="App block" icon="puzzle-piece" href="/components/order-goal/app-block">
    Configure these via theme-editor settings.
  </Card>

  <Card title="Web Components" icon="code" href="/components/order-goal/web-component">
    Set these directly on the tag.
  </Card>
</CardGroup>