Camel2.0 — Dokumentacja komponentów UI

2.13 #Components.FeatureCards Feature Cards

Karty na stronach produktowych. 6 typów: image, video, info (SVG+tekst), packshot-title, packshot, image-title. Obsługa flip-card (3D), animacje reveal (slide-in), slow pan & zoom tła, like-button, vertical text. CSS custom properties: --fc-accent-color, --fc-text-color.

Examples

Default styling

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--image

Karta ze zdjęciem w tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--video

Karta z wideo w tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--info

Karta info (ikona SVG + tekst)

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--packshot-title

Packshot z tytułem na tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--packshot

Packshot na białym tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--image-title

Zdjęcie z tytułem

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--flippable

Karta obracalna (flip 3D)

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--dark-bg

Ciemne tło (produkty black)

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--accent-bg

Kolor akcentu jako tło

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--content-top

Treść u góry

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--content-bottom

Treść na dole

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

Markup: feature-cards.html

<!-- Feature Cards: Informacja -->
<p style="color:#666;font-size:14px;">
  Złożony komponent z 6 typami kart. Podgląd na żywo: 
  <a href="/product-legend-blue.html" target="_blank">product-legend-blue.html</a>
</p>
<div style="display:flex; gap:16px; flex-wrap:wrap;">
  <!-- Info Card -->
  <div class="feature-card feature-card--info" style="width:200px; aspect-ratio:165/262; border:1px solid rgba(0,0,0,0.08); --fc-accent-color:#1c51a0; --fc-text-color:#333;">
    <p class="feature-card__text">Info Card<br>z ikoną SVG i tekstem</p>
  </div>
  <!-- Packshot Card -->
  <div class="feature-card feature-card--packshot" style="width:200px; aspect-ratio:165/262;">
    <p style="color:#999;font-size:12px;text-align:center;">Packshot Card</p>
  </div>
</div>

Source: src/scss/components/_feature-cards.scss, line 1