Callout Block Generator

Twórz i dostosuj bloki informacyjne (callouts) dla Gutenberga.

Tytuł

Treść

**pogrubienie**, *pochylenie*, ==zakreślenie==, listy, > cytaty

Emoji

Auto

Dodaj przycisk CTA

Wariant

Kolor markera (==...==)

Jasność tła (88%)

Obramowanie

Styl linii

Grubość linii (4px)

Zaokrąglenie (16px)

Cień

Max. szerokość (800px)

Akordeon (zwijany)

Asystent AI

Opisz treść callouta potocznym językiem, a AI sformatuje ją w czytelny sposób, tworząc listę lub punkty.

Podgląd – Callout

Tak będzie wyglądał Twój blok callout.

💡

Ważna informacja

To jest przykładowa treść callouta.

Punkt pierwszy
Punkt drugi

Krok pierwszy
Krok drugi

To jest cytat

Linia z wcięciem (2 spacje)

pogrubienie, pochylenie, zakreślenie.

Wygenerowany HTML


<div class="fc-callout" role="note" aria-label="Callout" style="color-scheme: light; border-left: 4px solid #1E3A8A;background:#E4E7F1;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,0.10);padding:24px 24px;max-width:800px;overflow:hidden;font-family: sans-serif;">
  <div style="display:flex;gap:16px;align-items:flex-start">
    <div style="font-size:24px;line-height:1;margin-top: 4px;">💡</div>
    <div style="flex:1 1 auto">
      <div style="font-weight:800;color:#1E3A8A;margin:0 0 6px 0; font-size: 1.125rem;">Ważna informacja</div>
      <div style="color:#111827;opacity:.95; line-height: 1.6;"><p style="margin:4px 0 0 0; ">To jest przykładowa treść callouta.</p>
<div style="height:4px"></div>
<ul style="margin:6px 0 0 1.2em; padding-left:1em;list-style:disc;"><li>Punkt pierwszy</li><li>Punkt drugi</li></ul>
<div style="height:4px"></div>
<ol style="margin:6px 0 0 1.2em; padding-left:1em;list-style:decimal;"><li>Krok pierwszy</li><li>Krok drugi</li></ol>
<div style="height:4px"></div>
<blockquote style="margin:6px 0 0 0; padding-left:12px; border-left:3px solid #4B61A1">To jest cytat</blockquote>
<p style="margin:4px 0 0 0; margin-left:16px;">Linia z wcięciem (2 spacje)</p>
<div style="height:4px"></div>
<p style="margin:4px 0 0 0; "><strong>pogrubienie</strong>, <em>pochylenie</em>, <mark style="background:#FFF59D; padding:0 2px; border-radius:3px">zakreślenie</mark>.</p></div>
    </div>
  </div>
</div>

Zawartość

Styl