Card · Synatix Components

Demo

Ein Markup, drei Adapter, austauschbare Themes. Framework und Theme lassen sich frei kombinieren – die Komponente sieht immer gleich aus und verhält sich gleich. Der Code unter der Vorschau zeigt genau die gewählte Kombination.

Persönliches Angebot

Konditionen für Ihre Anfrage

Zinssatz, Rate und Laufzeit auf einen Blick prüfen.

Vanilla@synatix/vanilla + @synatix/theme-kredit

import { enhanceCard } from "@synatix/vanilla";
import "@synatix/theme-kredit/theme.css";

// Ein Container im Markup trägt data-theme="kredit".
const root = document.querySelector(
  "[data-scope='card']"
);
const cleanup = enhanceCard(root);

Vanilla@synatix/vanilla + @synatix/theme-cpool

import { enhanceCard } from "@synatix/vanilla";
import "@synatix/theme-cpool/theme.css";

// Ein Container im Markup trägt data-theme="cpool".
const root = document.querySelector(
  "[data-scope='card']"
);
const cleanup = enhanceCard(root);

Vanilla@synatix/vanilla

import { enhanceCard } from "@synatix/vanilla";

const root = document.querySelector(
  "[data-scope='card']"
);
const cleanup = enhanceCard(root);

React@synatix/react + @synatix/theme-kredit

import { Card } from "@synatix/react";
import "@synatix/theme-kredit/theme.css";

export function Example() {
  return (
    <div data-theme="kredit">
      <Card>
        <Card.Header>
          <Card.Title>Angebot</Card.Title>
        </Card.Header>
        <Card.Content>Individuelle Konditionen</Card.Content>
      </Card>
    </div>
  );
}

React@synatix/react + @synatix/theme-cpool

import { Card } from "@synatix/react";
import "@synatix/theme-cpool/theme.css";

export function Example() {
  return (
    <div data-theme="cpool">
      <Card>
        <Card.Header>
          <Card.Title>Angebot</Card.Title>
        </Card.Header>
        <Card.Content>Individuelle Konditionen</Card.Content>
      </Card>
    </div>
  );
}

React@synatix/react

import { Card } from "@synatix/react";

export function Example() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Angebot</Card.Title>
      </Card.Header>
      <Card.Content>Individuelle Konditionen</Card.Content>
    </Card>
  );
}

Svelte@synatix/svelte + @synatix/theme-kredit

<script>
  import { Card } from "@synatix/svelte";
  import "@synatix/theme-kredit/theme.css";
</script>

<div data-theme="kredit">
  <Card title="Angebot">Individuelle Konditionen</Card>
</div>

Svelte@synatix/svelte + @synatix/theme-cpool

<script>
  import { Card } from "@synatix/svelte";
  import "@synatix/theme-cpool/theme.css";
</script>

<div data-theme="cpool">
  <Card title="Angebot">Individuelle Konditionen</Card>
</div>

Svelte@synatix/svelte

<script>
  import { Card } from "@synatix/svelte";
</script>

<Card title="Angebot">Individuelle Konditionen</Card>

Anatomie

Feste Parts dienen als Selektoren für CSS und Tests.

<div data-scope="card" data-part="root">
  <span data-part="header">…</span>
  <span data-part="title">…</span>
  <span data-part="description">…</span>
  <span data-part="content">…</span>
  <span data-part="footer">…</span>
</div>

Props

Prop	Typ	Standard	Beschreibung
`as`	`ElementType`	`"article"`	Setzt das semantische Wurzelelement.
`interactive`	`boolean`	`false`	Ergänzt Hover- und Fokuszustände.
`padding`	`"sm" \| "md" \| "lg"`	`"md"`	Steuert den Innenabstand.

Tastatur

Taste	Verhalten
`Tab`	Fokussiert interaktive Inhalte in natürlicher Reihenfolge.