Utwórz projekt ↗
HTML / CSS · KOD NA LICENCJI MIT

Listy i kroki: lista w kartach

Lista w kartach. Edytuj treść i wygląd, a potem skopiuj kod.

Edytuj HTML, CSS i JS ↗ Otwórz konfigurator ↗

Gdzie wykorzystać ten przykład?

Etapy, korzyści i listy informacji. Wariant „Listy i kroki: lista w kartach” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

Powtarzalne elementy HTML otrzymują wspólny układ i wyróżniki. Możesz dodać kolejne pozycje bez przepisywania arkusza stylów.

Jak dodać go na stronę?

  1. Otwórz przykład w edytorze i podmień tekst oraz kolory.
  2. HTML wstaw w miejscu, w którym ma pojawić się element.
  3. CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
  4. Sprawdź działanie na telefonie, klawiaturą i z własną treścią.

Na co zwrócić uwagę?

Zachowaj semantykę listy tam, gdzie kolejność ma znaczenie. Sprawdź zawijanie dłuższych opisów.

Co możesz zmienić w konfiguratorze?

Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.

Gotowy kod: Listy i kroki: lista w kartach

HTML

<div class="effect"><ol class="list-pack"><li><span class="list-number">01</span><div><h3>Listy i kroki 1</h3><p>Określ cel i zbierz najważniejsze informacje.</p></div></li><li><span class="list-number">02</span><div><h3>Listy i kroki 2</h3><p>Dobierz rozwiązanie i dopracuj jego szczegóły.</p></div></li><li><span class="list-number">03</span><div><h3>Listy i kroki 3</h3><p>Sprawdź efekt i pokaż go swoim odbiorcom.</p></div></li></ol></div>

CSS

*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.list-pack{padding:0;margin:0;list-style:none;text-align:left;display:block;}.list-pack li{position:relative;display:flex;align-items:center;gap:18px;padding:20px;margin-bottom:10px;background:white;box-shadow:0 4px 15px #0001;border-radius:8px}.list-number{display:grid;place-items:center;min-width:35px;font:20px monospace;color:#e95b30}.list-pack h3{font-size:18px;line-height:1.3;margin:0}.list-pack p{font-size:11px;margin:8px 0 0}.list-pack small{margin-left:auto;font:8px monospace;color:#e95b30;padding:3px 5px;background:#e95b3011;border-radius:4px}@media(max-width:500px){.list-pack{display:block}.list-pack li{display:flex}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

Podobne przykłady

Listy i kroki: numerowane kroki ↗Listy i kroki: lista z haczykami ↗Listy i kroki: lista z kropkami ↗Listy i kroki: lista z ikonami ↗Listy i kroki: linia osi czasu ↗Listy i kroki: lista z cyfrą w tle ↗