Stats

Stats 10 · Statement with numbers

A grey band with a short statement and three figures beneath. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-100'><div class='mx-auto max-w-4xl px-6 py-24 text-center'><p class='text-2xl font-medium leading-snug text-black md:text-3xl'>People use Windcraft to design pages and keep the code. Here is what that looks like.</p><dl class='mt-14 grid gap-8 sm:grid-cols-3'><div><dd class='text-4xl font-semibold text-black'>12k</dd><dt class='mt-1 text-sm text-neutral-600'>pages</dt></div><div><dd class='text-4xl font-semibold text-black'>0</dd><dt class='mt-1 text-sm text-neutral-600'>export steps</dt></div><div><dd class='text-4xl font-semibold text-black'>100%</dd><dt class='mt-1 text-sm text-neutral-600'>plain HTML</dt></div></dl></div></section>

Stats 09 · Milestones line

Three milestones along a horizontal line, each with a number and a caption. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-24'><h2 class='text-center text-3xl font-semibold tracking-tight text-black'>Milestones</h2><div class='relative mt-16 grid gap-10 sm:grid-cols-3'><div class='absolute left-0 right-0 top-2 hidden h-px bg-neutral-200 sm:block'></div><div class='relative text-center'><span class='mx-auto block h-4 w-4 rounded-full bg-black'></span><p class='mt-6 text-4xl font-semibold text-black'>1k</p><p class='mt-1 text-sm text-neutral-500'>pages designed</p></div><div class='relative text-center'><span class='mx-auto block h-4 w-4 rounded-full bg-black'></span><p class='mt-6 text-4xl font-semibold text-black'>10k</p><p class='mt-1 text-sm text-neutral-500'>pages designed</p></div><div class='relative text-center'><span class='mx-auto block h-4 w-4 rounded-full border-2 border-black bg-white'></span><p class='mt-6 text-4xl font-semibold text-neutral-400'>100k</p><p class='mt-1 text-sm text-neutral-500'>next goal</p></div></div></div></section>

Stats 08 · Dashboard stat cards

Four dashboard-style cards with a value and a change badge. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-6xl px-6 py-16'><div class='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'><div class='rounded-2xl border border-neutral-200 bg-white p-6'><p class='text-sm text-neutral-500'>Visitors</p><p class='mt-2 text-3xl font-semibold text-black'>24,810</p><span class='mt-3 inline-block rounded-full bg-black px-2 py-0.5 text-xs font-medium text-white'>+12%</span></div><div class='rounded-2xl border border-neutral-200 bg-white p-6'><p class='text-sm text-neutral-500'>Sign-ups</p><p class='mt-2 text-3xl font-semibold text-black'>1,204</p><span class='mt-3 inline-block rounded-full bg-black px-2 py-0.5 text-xs font-medium text-white'>+8%</span></div><div class='rounded-2xl border border-neutral-200 bg-white p-6'><p class='text-sm text-neutral-500'>Pages published</p><p class='mt-2 text-3xl font-semibold text-black'>386</p><span class='mt-3 inline-block rounded-full border border-neutral-300 px-2 py-0.5 text-xs font-medium text-neutral-600'>−2%</span></div><div class='rounded-2xl border border-neutral-200 bg-white p-6'><p class='text-sm text-neutral-500'>Avg. session</p><p class='mt-2 text-3xl font-semibold text-black'>8m 12s</p><span class='mt-3 inline-block rounded-full bg-black px-2 py-0.5 text-xs font-medium text-white'>+5%</span></div></div></div></section>

Stats 07 · Divided row

Four stats separated by vertical hairlines inside one bordered box. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><dl class='grid divide-y divide-neutral-200 rounded-3xl border border-neutral-200 sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4 lg:divide-x'><div class='p-8'><dt class='text-sm text-neutral-500'>Pages</dt><dd class='mt-2 text-4xl font-semibold text-black'>12k</dd></div><div class='p-8'><dt class='text-sm text-neutral-500'>Projects</dt><dd class='mt-2 text-4xl font-semibold text-black'>3.4k</dd></div><div class='p-8'><dt class='text-sm text-neutral-500'>Animations</dt><dd class='mt-2 text-4xl font-semibold text-black'>9k</dd></div><div class='p-8'><dt class='text-sm text-neutral-500'>Frames</dt><dd class='mt-2 text-4xl font-semibold text-black'>27k</dd></div></dl></div></section>

Stats 06 · One huge number

A single oversized figure with a sentence underneath, centered. Sample number.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-3xl px-6 py-32 text-center'><p class='text-8xl font-semibold tracking-tighter text-black md:text-9xl'>12,480</p><p class='mt-6 text-xl text-neutral-600'>pages designed in Windcraft and counting.</p><p class='mt-2 text-xs text-neutral-400'>Sample number: replace with yours.</p></div></section>

Stats 05 · Progress bars

Three percentages drawn as thin black bars on grey tracks. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-3xl font-semibold tracking-tight text-black'>What people use most</h2><div class='mt-10 space-y-8'><div><div class='flex justify-between text-sm'><span class='font-medium text-black'>Code panel</span><span class='text-neutral-500'>92%</span></div><div class='mt-2 h-2 rounded-full bg-neutral-100'><div class='h-2 w-[92%] rounded-full bg-black'></div></div></div><div><div class='flex justify-between text-sm'><span class='font-medium text-black'>Hover states</span><span class='text-neutral-500'>74%</span></div><div class='mt-2 h-2 rounded-full bg-neutral-100'><div class='h-2 w-[74%] rounded-full bg-black'></div></div></div><div><div class='flex justify-between text-sm'><span class='font-medium text-black'>Animations</span><span class='text-neutral-500'>58%</span></div><div class='mt-2 h-2 rounded-full bg-neutral-100'><div class='h-2 w-[58%] rounded-full bg-black'></div></div></div></div><p class='mt-8 text-xs text-neutral-400'>Sample figures.</p></div></section>

Stats 04 · Heading and stacked numbers

A heading and short paragraph on the left, three stats with hairlines on the right. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-24 md:grid-cols-2'><div><h2 class='text-4xl font-semibold tracking-tight text-black'>Built to be used</h2><p class='mt-4 text-lg text-neutral-600'>A few numbers about how people work with it. Sample figures.</p></div><dl class='divide-y divide-neutral-200 border-y border-neutral-200'><div class='flex items-baseline justify-between py-6'><dt class='text-neutral-600'>Pages designed</dt><dd class='text-4xl font-semibold text-black'>12k</dd></div><div class='flex items-baseline justify-between py-6'><dt class='text-neutral-600'>Projects</dt><dd class='text-4xl font-semibold text-black'>3.4k</dd></div><div class='flex items-baseline justify-between py-6'><dt class='text-neutral-600'>Countries</dt><dd class='text-4xl font-semibold text-black'>40+</dd></div></dl></div></section>

Stats 03 · Bordered cards

Four stat cards in a 2 by 2 grid, each with a label, a number and a short note. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-4xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>How it is going</h2><div class='mt-12 grid gap-4 sm:grid-cols-2'><div class='rounded-2xl border border-neutral-200 bg-white p-8'><p class='text-sm text-neutral-500'>Pages designed</p><p class='mt-2 text-5xl font-semibold text-black'>12,480</p><p class='mt-3 text-sm text-neutral-500'>Across all projects (sample)</p></div><div class='rounded-2xl border border-neutral-200 bg-white p-8'><p class='text-sm text-neutral-500'>Active projects</p><p class='mt-2 text-5xl font-semibold text-black'>3,402</p><p class='mt-3 text-sm text-neutral-500'>In the last 30 days (sample)</p></div><div class='rounded-2xl border border-neutral-200 bg-white p-8'><p class='text-sm text-neutral-500'>Animations used</p><p class='mt-2 text-5xl font-semibold text-black'>9,150</p><p class='mt-3 text-sm text-neutral-500'>From the library (sample)</p></div><div class='rounded-2xl bg-black p-8'><p class='text-sm text-neutral-400'>Average edit time</p><p class='mt-2 text-5xl font-semibold text-white'>4 min</p><p class='mt-3 text-sm text-neutral-400'>From paste to shipped (sample)</p></div></div></div></section>

Stats 02 · Dark four numbers

A black band with four white numbers and grey labels. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black'><div class='mx-auto max-w-6xl px-6 py-20'><dl class='grid gap-10 text-center sm:grid-cols-2 lg:grid-cols-4'><div><dd class='text-5xl font-semibold text-white'>12k</dd><dt class='mt-2 text-sm text-neutral-400'>pages designed</dt></div><div><dd class='text-5xl font-semibold text-white'>3.4k</dd><dt class='mt-2 text-sm text-neutral-400'>projects</dt></div><div><dd class='text-5xl font-semibold text-white'>98%</dd><dt class='mt-2 text-sm text-neutral-400'>would recommend</dt></div><div><dd class='text-5xl font-semibold text-white'>24h</dd><dt class='mt-2 text-sm text-neutral-400'>average reply time</dt></div></dl></div></section>

Stats 01 · Four numbers

Four large numbers in a row with small labels under a short heading. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24 text-center'><h2 class='text-3xl font-semibold tracking-tight text-black'>Windcraft in numbers</h2><p class='mt-2 text-sm text-neutral-500'>Sample numbers: replace with yours.</p><dl class='mt-14 grid gap-10 sm:grid-cols-2 lg:grid-cols-4'><div><dd class='text-5xl font-semibold text-black'>12k</dd><dt class='mt-2 text-sm text-neutral-500'>pages designed</dt></div><div><dd class='text-5xl font-semibold text-black'>3.4k</dd><dt class='mt-2 text-sm text-neutral-500'>projects</dt></div><div><dd class='text-5xl font-semibold text-black'>98%</dd><dt class='mt-2 text-sm text-neutral-500'>would recommend</dt></div><div><dd class='text-5xl font-semibold text-black'>24h</dd><dt class='mt-2 text-sm text-neutral-500'>average reply time</dt></div></dl></div></section>