← Do katalogu

Komponent · Akcje

Subtelne CTA

Zwięzły przycisk działania z dwiema proporcjami i lokalnymi tokenami koloru.

ID zasobucmp-quiet-cta-01
Eksperymentalny

Podgląd

Rozmiar
Powiększenie100%

Oddzielny kontekst prezentacyjny; podgląd uruchamia zaufany kod biblioteki.

Szczegóły technicznePliki, warianty, zależności i sposób użycia

O komponencie

Wyraźne, spokojne wezwanie do działania w sekcjach ofertowych.

Warianty

Standard

Plik podglądu previews/standard.astro

  • Tokeny --resource-ink, --resource-accent

Kompaktowy

Plik podglądu previews/compact.astro

  • Fonty System UI sans-serif, 14 px

Pliki

Folder zasobu wyznacza własne pliki, które można skopiować niezależnie od wspólnych zależności.

  • Źródłosrc/content/resources/quiet-cta/CallToAction.astro
  • Plik podglądusrc/content/resources/quiet-cta/previews/standard.astro
  • Plik podglądusrc/content/resources/quiet-cta/previews/compact.astro
  • Grafikasrc/content/resources/quiet-cta/assets/thumbnail.svg

Główny plik: src/content/resources/quiet-cta/CallToAction.astro

Zależności

Współdzielone

  • shared/design-tokens.css

    Komponent używa wspólnych tokenów koloru, które należy skopiować lub odwzorować w projekcie docelowym.

Pakiety zewnętrzne

Brak.

Jak użyć w Astro

Integracja nie została jeszcze zweryfikowana.

  1. Skopiuj CallToAction.astro oraz pozostałe pliki wymienione w sekcji plików należących do zasobu.
  2. Skopiuj src/shared/design-tokens.css do src/shared/ w projekcie docelowym albo odwzoruj tokeny --resource-ink i --resource-accent. Jeśli przeniesiesz komponent lub arkusz, zaktualizuj względny @import w CallToAction.astro.
  3. Zaimportuj komponent w stronie Astro, np. import CallToAction from '../components/CallToAction.astro', i użyj <CallToAction href="/kontakt" />; prop compact włącza mniejszy wariant.
  4. Ustaw docelowe href, a następnie sprawdź style, focus klawiatury i ruch przy prefers-reduced-motion. Integracja nie jest zweryfikowana, dopóki ta próba nie zostanie wykonana.

Fonty, grafiki i style

Fonty

  • System UI sans-serif

Grafiki

  • assets/thumbnail.svg — miniatura karty katalogu

Style globalne

  • src/shared/design-tokens.css

Tokeny

  • --resource-ink
  • --resource-accent

Pochodzenie i licencja

Źródło
Opracowano na potrzeby prywatnej biblioteki demonstracyjnej.
Autor / uznanie
Własny materiał demonstracyjny
Licencja
Materiał autorski; sprawdź warunki wykorzystania przed użyciem komercyjnym.