Przejdź do treści
Sweet Lava Design System
↗ Strona

Wzorce Boks odpowiedzi

Wzorce

Boks „kluczowa odpowiedź”

Wyróżniony blok z bezpośrednią odpowiedzią na pytanie z nagłówka. Daje czytelnikowi sedno w dwóch zdaniach, a agentom AI gotowy do zacytowania fragment. Tło mint-soft, miętowa obwódka, ostre rogi.

Samodzielnie

Klasa .key-answer działa wszędzie – nie tylko w treści artykułu.

W skrócie: design system to żywa biblioteka tokenów i komponentów, z których składa się produkt. Pilnuje spójności i przyspiesza pracę – zamiast projektować te same elementy w kółko, składasz gotowe.

html 
<div class="key-answer max-w-2xl">
  <p><strong>W skrócie:</strong> bezpośrednia odpowiedź w 1–2 zdaniach.</p>
</div>

W treści artykułu

Najczęściej tuż pod nagłówkiem H2 z pytaniem. Wewnątrz .prose dziedziczy margines i typografię.

Czym jest Core Web Vitals?

W skrócie: to trzy metryki Google mierzące realne wrażenia z ładowania, interaktywności i stabilności strony (LCP, INP, CLS). Wpływają na pozycję w wyszukiwarce.

Dalsza część akapitu rozwija temat normalnym tekstem body…

Definicja

css 
.key-answer {
  background: var(--color-mint-soft);
  border: 1px solid color-mix(in srgb, var(--color-mint) 60%, transparent);
  border-radius: var(--radius-card); /* 0 */
  padding: 1.25rem 1.5rem;
  margin: 1.5em 0;
}