Karty

Karta to klikalny blok treści: meta, tytuł, opis i sygnał „dalej”. Cała powierzchnia jest linkiem (pseudoelement after rozciąga obszar kliknięcia), a strzałka pojawia się na hover.

Karta podstawowa

Meta + tytuł + opis. Strzałka wjeżdża na hover całej karty.

Usługa

E-commerce

Sklepy, które sprzedają: WooCommerce, Shopify i platformy custom z dobrą analityką.

Artykuł

Czym jest design system?

I kiedy Twoja firma naprawdę go potrzebuje.

astro

<Card
  href="/uslugi/ecommerce/"
  meta="Usługa"
  title="E-commerce"
  description="Sklepy, które sprzedają."
  cursorLabel="Zobacz"
/>

Karta z okładką gradientową

Okładka bloga to pasek 64 px z gradientem tematu (patrz: Gradienty). Na produkcji warstwa płynie; tu pokazujemy statyczny wzór.

Branding

Rebranding marki modowej

Od znaku po pełną księgę i materiały do druku.

Asystent dla zespołu sprzedaży

Jak wdrożyliśmy AI bez chaosu.

Siatka z separatorami

Trzy karty z leftRule – cienka linia oddziela kolumny od sm w górę.

Strategia

Warsztaty, badania, mapa produktu.

Design

UI, prototyp, system komponentów.

Development

Kod, wdrożenie, Core Web Vitals.

Właściwości

Prop	Typ	Domyślnie	Opis
href	string	–	Cel kliknięcia (cała karta jest klikalna).
title	string	–	Tytuł karty (link rozciąga się na całą kartę).
description	string?	–	Opis pod tytułem.
meta	string?	–	Etykieta nad tytułem (eyebrow).
headingLevel	'h2' \| 'h3'	'h3'	Poziom semantyczny nagłówka.
readLabel	string?	–	Tekst linku „czytaj" zamiast strzałki.
leftRule	boolean	false	Pionowy separator po lewej (od sm).
coverPlaceholder	boolean	false	Pokaż pasek okładki (gradient tematu).
coverGradient	string?	–	Statyczny gradient okładki (fallback).
coverFlow	{ gradient; shift }?	–	Animowana, zapętlona okładka.