slidev-theme-mistica

Slidev theme for Telefonica's Mistica design system. Supports Movistar, O2, Vivo, and Telefonica skins.

Install

npm i slidev-theme-mistica

Usage

---
theme: mistica
mistica:
  skin: telefonica
  mode: light
---

# My Presentation goes here!!!

| Skin | Mode | Screenshot | | ---------- | ----- | -------------------------------------------------------------- | | telefonica | light | | | movistar | light | | | o2 | light | l | | vivo | light | |

Layouts

default

Standard content slide with optional overline text. Includes a brand logo and page number in the footer.

| Prop | Type | Required | Description | | ---------- | -------- | -------- | ------------------------------------ | | overline | string | No | Small uppercase text above the title |

---
layout: default
overline: Introduction
---

# Slide title

Body content goes here.

cover

Opening title slide. Brand logo is placed at the top-left. Content is left-aligned and capped at 65 % width. Use for the first slide of your deck.

| Prop | Type | Required | Description | | -------- | -------- | -------- | --------------------------------------------------------- | | footer | string | No | Text shown at the bottom-left (e.g. a date or event name) |

---
layout: cover
footer: March 2026 · Internal
---

# Presentation title

Subtitle or short description

brand

Section divider with full brand-color background and inverse (white) text. Pass a section number to render a large zero-padded index on the right side — useful for visually numbering the sections of your presentation.

| Prop | Type | Required | Description | | | --------- | --------- | -------- | ----------- | ----------------------------------------------------------------------- | | section | string \ | number | No | Section number displayed large on the right (zero-padded to two digits) |

---
layout: brand
section: 1
---

# Section title

Optional description for this section

two-col

Two-column layout separated by a vertical divider line. Default slot content (or the ::left:: named slot) goes on the left; ::right:: goes on the right.

---
layout: two-col
---

# Left column content

- Item A
- Item B

::right::

# Right column content

- Item C
- Item D

image

Split layout with content on the left and a full-bleed image on the right (50 % width). Includes a brand logo and page number in the footer of the content side.

| Prop | Type | Required | Description | | ---------- | -------- | -------- | ----------------------------------------------- | | image | string | Yes | URL or path to the image displayed on the right | | overline | string | No | Small uppercase text above the title |

---
layout: image
image: /images/photo.jpg
overline: Case Study
---

# Slide title

Body content on the left half.

quote

Centered quote slide with a large decorative quotation mark. The last paragraph (or an h3/h4) is styled as the attribution line.

---
layout: quote
---

This is the quote text that will be displayed centered and in italics.

— Author Name

final

Closing slide with a centered brand logo. Any slot content is rendered below the logo. Use for "Thank you" or closing slides.

---
layout: final
---

Thank you!

Components

<MisticaIcon>

Bundled SVG icons from mistica-icons. Icons are resolved per skin at runtime.

<MisticaIcon name="search" :size="32" color="var(--mistica-color-brand)" />

| Prop | Type | Default | Description | | ------- | -------- | -------------- | ---------------------- | | name | string | — | Icon name (kebab-case) | | size | number | 24 | Icon size in px | | color | string | currentColor | CSS color value |

<StatCard>

KPI card with label, value, optional trend and description.

<StatCard label="Users" value="12.4K" :trend="8.2" description="Monthly active" />

| Prop | Type | Default | Description | | ------------- | --------------- | ------- | -------------------------- | | label | string | — | KPI label / title | | value | string/number | — | Main value to display | | trend | number | — | Trend percentage (± arrow) | | description | string | — | Description text |

<LogoPlaceholder>

Renders the Telefónica Innovación Digital brand logo.

<LogoPlaceholder variant="pos" size="md" />

| Prop | Type | Default | Description | | --------- | ------------------- | ------- | ---------------------------------------- | | variant | "pos" | "neg" | "pos" | Positive (dark) or negative (white) logo | | size | "sm" | "md" | "lg" | "sm" | Logo height: sm=16px, md=26px, lg=48px |

<IconRow>

Flex row with icon and text. Replaces the manual display: flex + MisticaIcon + span pattern.

<IconRow icon="rocket">Launch the dashboard</IconRow>
<IconRow icon="warning" color="error" background>Something went wrong</IconRow>

| Prop | Type | Default | Description | | ------------ | ------------------- | ---------- | ---------------------------- | | icon | string | — | MisticaIcon name | | color | string | "brand" | Token shorthand or CSS color | | iconSize | number | 28 | Icon size in px | | background | boolean | false | Adds pill-like background | | align | "center" | "top" | "center" | Vertical alignment of icon |

<TextBlock>

Title + subtitle pair or title + body content block. Useful inside <IconRow> or <Boxed>.

<TextBlock title="Plan" subtitle="Think before acting" />

<TextBlock title="Opinion A">
  Longer description with <strong>rich text</strong>.
</TextBlock>

| Prop | Type | Default | Description | | ------------ | -------- | ------------ | -------------------------- | | title | string | — | Main title text | | subtitle | string | — | Secondary text below title | | titleSize | string | "0.85rem" | Override title font-size | | titleColor | string | — | Override title color |

<Boxed>

Generic card/container with configurable border, background, and padding.

<Boxed background="alternative" padding="1rem">Card content</Boxed>
<Boxed border="high" :opacity="0.3">Dimmed card</Boxed>

| Prop | Type | Default | Description | | ------------- | ------------------------------------------------- | ------------- | ---------------------- | | padding | string | "1.25rem" | Inner padding | | background | "default" | "alternative" | "container" | "brand" | "" | "" | Background color token | | border | "normal" | "high" | "selected" | "none" | "normal" | Border color token | | borderWidth | "1px" | "2px" | "1px" | Border width | | radius | string | "container" | Border-radius token | | opacity | number | — | Opacity (0–1) | | textAlign | "left" | "center" | "left" | Text alignment |

<FeatureCard>

Centered card with icon, title, and description. Wraps <Boxed> + <MisticaIcon>.

<FeatureCard icon="settings" title="Agents" highlighted>
  AI operating in multi-step, autonomous loops
</FeatureCard>
<FeatureCard icon="lightning" title="Skills" color="warning" :opacity="0.3">
  Reusable, scoped instructions
</FeatureCard>

| Prop | Type | Default | Description | | ------------- | --------- | --------- | ------------------------------ | | icon | string | — | MisticaIcon name | | title | string | — | Card title | | color | string | "brand" | Icon color token or CSS value | | opacity | number | — | Opacity for dimmed state | | highlighted | boolean | false | Emphasized border (high + 2px) |

<Callout>

Alert/highlight box with icon, optional title, and body content.

<Callout type="warning" title="Remember">Important information here.</Callout>
<Callout type="success">Inline note without a title.</Callout>

| Prop | Type | Default | Description | | ------- | ------------------------------------------ | -------- | --------------------------- | | type | "info" | "warning" | "success" | "error" | "info" | Sets default icon and color | | icon | string | per type | Override the default icon | | title | string | — | Optional title next to icon |

<DataTable>

Grid-based table with header row and optional row highlighting.

<DataTable
  :columns="['Mode', 'What it does']"
  :widths="['7rem', '1fr']"
  :rows="[
    ['Plan', 'Thinks, reasons, proposes steps'],
    ['Act', 'Executes, writes, runs commands'],
  ]"
/>

| Prop | Type | Default | Description | | ----------- | ------------ | ----------- | --------------------------------- | | columns | string[] | — | Column header labels | | rows | string[][] | — | Row data (supports HTML in cells) | | widths | string[] | equal 1fr | CSS grid column widths | | highlight | number | — | 0-indexed row to highlight | | striped | boolean | true | Alternate row background colors |

<ImageBox>

Styled image with border and border-radius.

<ImageBox src="/screenshots/demo.png" maxHeight="320px" />

| Prop | Type | Default | Description | | ----------- | -------- | -------- | -------------------- | | src | string | — | Image source URL | | maxHeight | string | — | Maximum height (CSS) | | width | string | "100%" | Width (CSS) | | mt | string | — | Margin-top (CSS) |

<Tag>

Small badge/label.

<Tag type="success">Active</Tag>
<Tag type="warning">Beta</Tag>

| Prop | Type | Default | Description | | ------ | -------------------------------------------------------------- | --------- | --------------------- | | type | "brand" | "success" | "warning" | "error" | "info" | "promo" | "highlight" | "brand" | Sets background color |

<StepList> + <StepItem>

Auto-numbered step list with circular badges.

<StepList>
  <StepItem>Create a SKILL.md file</StepItem>
  <StepItem>Add YAML frontmatter</StepItem>
  <StepItem>Write the procedure</StepItem>
</StepList>

| Component | Prop | Type | Default | Description | | ---------- | ----- | -------- | ------------ | ----------------- | | StepList | gap | string | "0.75rem" | Gap between steps |

<VStack>

Vertical flex container.

<VStack gap="1.25rem" mt="1.5rem">
  <div>First</div>
  <div>Second</div>
</VStack>

| Prop | Type | Default | Description | | --------- | -------- | -------- | ----------------------- | | gap | string | "1rem" | Gap between children | | align | string | — | align-items value | | justify | string | — | justify-content value | | mt | string | — | Margin-top | | padding | string | — | Inner padding |

<HStack>

Horizontal flex container.

<HStack gap="0.5rem" wrap>
  <Tag>One</Tag>
  <Tag>Two</Tag>
</HStack>

| Prop | Type | Default | Description | | --------- | --------- | ---------- | ----------------------- | | gap | string | "1rem" | Gap between children | | align | string | "center" | align-items value | | justify | string | — | justify-content value | | mt | string | — | Margin-top | | padding | string | — | Inner padding | | wrap | boolean | false | Allow wrapping |

CSS Variables

All Mistica design tokens are available as CSS custom properties:

var(--mistica-color-brand)
var(--mistica-color-background)
var(--mistica-color-textPrimary)
var(--mistica-border-radius-container)

Examples

Preview the theme per skin:

npx @slidev/cli examples/example-movistar.md
npx @slidev/cli examples/example-o2.md
npx @slidev/cli examples/example-vivo.md
npx @slidev/cli examples/example-telefonica.md