Metric Block Generator

Stwórz blok z metrykami kursu, takimi jak poziom trudności i czas trwania.

Ustawienia Bloku Metryk

Poziom trudności

Szacowany czas

Kategorie

🌐Ogólne

Układ

Pokaż poziom

Pokaż czas

Pokaż kategorię

Kolor tła

Kolor tekstu

Kolor ikon

Kolor ramki

Podgląd – Blok Metryk

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

Poziom: Średniozaawansowany

Czas: 30 min

Kategoria: 🌐Ogólne

Wygenerowany HTML Bloku Metryk


<div class="fc-metric-wrapper" style="font-family: sans-serif; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-direction: row; background-color: #F9FAFB; border: 1px solid #F3F4F6; border-radius: 0.75rem; padding: 1rem; flex-wrap: wrap;">
    
        <div style="display: flex; align-items: center; gap: 0.5rem; color: #374151; font-size: 0.9rem;">
            <span style="color: #6B7280; display: flex; align-items: center;"><div style="display: flex; align-items: center;"><span style="margin-right: 2px;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flame-icon lucide-flame"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></span><span style="margin-right: 2px;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flame-icon lucide-flame"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></span></div></span>
            <span>Poziom: <strong>Średniozaawansowany</strong></span>
        </div>
    
    
        <div style="display: flex; align-items: center; gap: 0.5rem; color: #374151; font-size: 0.9rem;">
            <span style="color: #6B7280;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></span>
            <span>Czas: <strong>30 min</strong></span>
        </div>
    
    
        <div style="display: flex; align-items: center; gap: 0.5rem; color: #374151; font-size: 0.9rem;">
            <span style="color: #6B7280;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg></span>
            <div style="display: flex; align-items: center; flex-wrap: wrap;">
                <span>Kategoria: <strong><span>🌐Ogólne</span></strong></span>
            </div>
        </div>
    
</div>