Announcement Banners

Announcement Banners 10 · Ticker line

A single line of several short messages separated by dots, as a static ticker.

<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>
        <div class='overflow-hidden border-y border-neutral-200 bg-white py-2.5'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-6 gap-y-1 px-4 text-xs font-medium uppercase tracking-widest text-neutral-600'><span>New: animation library</span><span class='text-neutral-300'>•</span><span>Tailwind v3 and v4</span><span class='text-neutral-300'>•</span><span>Figma plugin</span><span class='text-neutral-300'>•</span><span>MCP server</span></div></div>

Announcement Banners 09 · Inline notice

A notice inside the page content with a thick black left border, a title and a short note.

<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-16'><div class='rounded-r-xl border-l-4 border-black bg-neutral-50 p-5'><h3 class='text-sm font-semibold text-black'>Heads up</h3><p class='mt-1 text-sm text-neutral-600'>Interactions run in the preview, not while you are editing. Switch to Interact to try them.</p></div></div></section>

Announcement Banners 08 · Feature card

A large rounded announcement card in a page, with an icon tile, a title, a sentence and two buttons.

<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-4xl px-6 py-16'><div class='flex flex-wrap items-center gap-6 rounded-3xl bg-black p-8'><span class='grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-white text-2xl text-black'>✦</span><div class='min-w-0 flex-1'><h3 class='text-xl font-semibold text-white'>The MCP server is live</h3><p class='mt-1 text-sm text-neutral-400'>Let Claude or Cursor read your library and save designs for you.</p></div><div class='flex gap-2'><a href='#' class='rounded-lg bg-white px-4 py-2 text-sm font-semibold text-black'>Set it up</a><a href='#' class='rounded-lg border border-neutral-700 px-4 py-2 text-sm font-semibold text-white'>Later</a></div></div></div></section>

Announcement Banners 07 · Logo and message

A top bar with the Windcraft logo, a centered message and a small button.

<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>
        <div class='border-b border-neutral-200 bg-white px-6 py-3'><div class='mx-auto flex max-w-6xl items-center justify-between gap-4'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-5 w-auto'><p class='hidden text-sm text-neutral-600 sm:block'>Now with Tailwind v4 support in the config tab.</p><a href='#' class='rounded-lg bg-black px-3.5 py-1.5 text-sm font-medium text-white'>Try it</a></div></div>

Announcement Banners 06 · Message and button apart

A light grey banner with the message on the left and an outlined button on the right.

<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>
        <div class='border-b border-neutral-200 bg-neutral-50 px-6 py-3'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3'><p class='text-sm text-neutral-700'><span class='font-semibold text-black'>Webinar:</span> design a landing page in 20 minutes, Thursday 17:00.</p><a href='#' class='rounded-lg border border-black px-4 py-1.5 text-sm font-medium text-black hover:bg-black hover:text-white'>Save my seat</a></div></div>

Announcement Banners 05 · Floating pill

A rounded black pill floating at the bottom of a mock page with a short message and a button.

<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>
        <div class='relative h-[260px] overflow-hidden bg-neutral-100'><div class='space-y-3 p-8'><div class='h-4 w-1/3 rounded bg-neutral-200'></div><div class='h-3 w-1/2 rounded bg-neutral-200'></div></div><div class='absolute inset-x-0 bottom-6 flex justify-center px-4'><div class='flex flex-wrap items-center gap-3 rounded-full bg-black py-2 pl-5 pr-2 text-sm text-white shadow-xl'><span>Version 2 is out</span><a href='#' class='rounded-full bg-white px-4 py-1.5 font-semibold text-black'>What changed</a></div></div></div>

Announcement Banners 04 · Countdown

A black banner with a message and four small countdown boxes for days, hours, minutes and seconds. 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>
        <div class='bg-black px-4 py-4'><div class='mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-x-8 gap-y-3 text-white'><p class='text-sm font-medium'>Launch week ends in</p><div class='flex gap-2 font-mono text-sm'><span class='rounded-md border border-neutral-700 px-2.5 py-1'>02d</span><span class='rounded-md border border-neutral-700 px-2.5 py-1'>14h</span><span class='rounded-md border border-neutral-700 px-2.5 py-1'>36m</span><span class='rounded-md border border-neutral-700 px-2.5 py-1'>09s</span></div><a href='#' class='rounded-lg bg-white px-4 py-1.5 text-sm font-semibold text-black'>See offers</a></div></div>

Announcement Banners 03 · Dismissible

A grey banner with a message in the middle and a close button on the right.

<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>
        <div class='relative bg-neutral-100 px-12 py-3 text-center text-sm text-neutral-700'>Planned maintenance on Sunday, 02:00 to 03:00. Saving may be slow. <a href='#' class='font-medium text-black underline'>Details</a><button type='button' class='absolute right-3 top-1/2 grid h-7 w-7 -translate-y-1/2 place-items-center rounded-full text-neutral-500 hover:bg-neutral-200' aria-label='Dismiss'>×</button></div>

Announcement Banners 02 · Badge and arrow

A white banner with a black New badge, a message and an arrow, with a hairline below.

<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>
        <div class='border-b border-neutral-200 bg-white px-4 py-3'><a href='#' class='mx-auto flex max-w-3xl items-center justify-center gap-3 text-sm text-neutral-700 hover:text-black'><span class='rounded-full bg-black px-2.5 py-0.5 text-xs font-semibold text-white'>New</span><span>The animation library is now in the editor</span><span aria-hidden='true'>→</span></a></div>

Announcement Banners 01 · Black strip

A thin black strip across the top with one centered line and a link.

<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>
        <div class='bg-black px-4 py-2.5 text-center text-sm text-white'>Interactions are here: make a menu without writing JavaScript. <a href='#' class='ml-1 font-semibold underline underline-offset-4'>Read more →</a></div>