Alle verfügbaren Textgrößen von xs bis 9xl für Überschriften und Text-Elemente im CDK Design System.
Alle verfügbaren Textgrößen von xs bis 9xl für Überschriften und Text-Elemente.
text-xs (0.75rem / 12px)
<h1 class="text-xs">...</h1>text-sm (0.875rem / 14px)
<h1 class="text-sm">...</h1>text-base (1rem / 16px)
<h1 class="text-base">...</h1>text-lg (1.125rem / 18px)
<h1 class="text-lg">...</h1>text-xl (1.25rem / 20px)
<h1 class="text-xl">...</h1>text-2xl (1.5rem / 24px)
<h1 class="text-2xl">...</h1>text-3xl (1.875rem / 30px)
<h1 class="text-3xl">...</h1>text-4xl (2.25rem / 36px)
<h1 class="text-4xl">...</h1>text-5xl (3rem / 48px)
<h1 class="text-5xl">...</h1>text-6xl (3.75rem / 60px)
<h1 class="text-6xl">...</h1>text-7xl (4.5rem / 72px)
<h1 class="text-7xl">...</h1>text-8xl (6rem / 96px)
<h1 class="text-8xl">...</h1>text-9xl (8rem / 128px)
<h1 class="text-9xl">...</h1><h1 class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl">
Responsive Überschrift
</h1>Diese Überschrift passt sich automatisch an die Bildschirmgröße an: 2xl (mobil), 4xl (tablet), 6xl (desktop), 8xl (large desktop).
<h1 class="text-6xl font-heading font-bold">
CDK Design System
</h1>Die Klasse font-heading verwendet Poppins für markante Überschriften.
Verfügbare Font Weights für Montserrat und Poppins.
font-normal (400)
The quick brown fox jumps over the lazy dog
<p class="font-normal">...</p>font-medium (500)
The quick brown fox jumps over the lazy dog
<p class="font-medium">...</p>font-semibold (600)
The quick brown fox jumps over the lazy dog
<p class="font-semibold">...</p>font-bold (700)
The quick brown fox jumps over the lazy dog
<p class="font-bold">...</p>font-extrabold (800)
The quick brown fox jumps over the lazy dog
<p class="font-extrabold">...</p>Verschiedene Line Heights für optimale Lesbarkeit.
leading-none (1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="leading-none">...</p>leading-tight (1.25)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="leading-tight">...</p>leading-snug (1.375)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="leading-snug">...</p>leading-normal (1.5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="leading-normal">...</p>leading-relaxed (1.625)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="leading-relaxed">...</p>leading-loose (2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="leading-loose">...</p>Die verwendeten Font Families im CDK Design System.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
<p class="font-sans">...</p>Standard-Schriftart für Body-Text und allgemeine Inhalte.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
<h1 class="font-heading">...</h1>Schriftart für Überschriften und markante Textelemente.