Byline
Live demo

HTML template · Tailwind CSS 4

Landing pages for people who sell what they know.

Byline is an editorial template for online courses, paid newsletters, membership communities and digital product shops. Large serif type, hairline rules and one vermillion accent, so your offer reads like a well-set magazine.

Open the live demo See all four layouts
Home layouts
4
Pages
21
Blocks
43
Directions
2
The Course and Cohort Launch home page, with the headline Write the course only you could teach beside a portrait of the instructorOpen the Course and Cohort Launch demo
The same home page on a phone, the headline set large above two stacked buttons

01 · Home layouts

Four businesses, four different pages.

Each home is its own stack of sections, not one page recolored. Pick the one closest to what you sell and borrow blocks from the others.

  1. Open the Course and Cohort Launch demo

    Course and Cohort Launch

    The flagship. A countdown bar, a curriculum accordion, the instructor's story and pricing with a payment plan toggle, built to fill a cohort by a date.

    • Countdown announcement
    • Course split hero
    • Outcome grid
    • Curriculum accordion
    • Instructor split
    • Pricing with payment plan
    View demo Right-to-left version
  2. Open the Paid Newsletter demo

    Paid Newsletter

    A masthead-led layout for writers. Recent issues, what a paid subscription gets you, and a free versus paid comparison that does the selling.

    • Masthead hero
    • Recent issues
    • Numbered benefits
    • Author split
    • Free versus paid table
    • Inline subscribe
    View demo Right-to-left version
  3. Open the Membership Community demo

    Membership Community

    Social proof first. Member avatars and a live counter up top, a tabbed look inside the community, upcoming events and three membership tiers.

    • Community hero
    • Member marquee
    • Alternating pillars
    • Tabbed panel
    • Events strip
    • Monthly and annual pricing
    View demo Right-to-left version
  4. Open the Digital Product Shop demo

    Digital Product Shop

    Catalog-led, for templates, presets and workbooks. A featured product hero, a filterable product grid, a spotlight and collections.

    • Shop split hero
    • Filterable product grid
    • Featured spotlight
    • Logo marquee
    • Collections
    • Newsletter capture
    View demo Right-to-left version

02 · Every page

The rest of the site, already built.

Pricing, a product page and checkout, a blog, the account pages, legal pages and the small ones people forget until launch day.

03 · Light and dark

Dark is designed, not inverted.

The dark theme has its own palette. Hairlines get a little stronger, the accent lifts, and photographs are toned down so they do not glare against the black ground. The toggle remembers the choice and the page never flashes the wrong theme on load.

The course home in the dark themeThe shop home in the dark theme, product photography toned down

04 · Right to left

Every page, in both directions.

The download includes a complete right-to-left build with Arabic demo copy and IBM Plex Sans Arabic, so you can see the typography, not just a mirrored layout. Both folders come from one stylesheet written in logical properties.

Open the RTL demo

The course home in Arabic, laid out right to leftThe community home in Arabic, in the dark theme

05 · Sections library

43 blocks you can rearrange.

Every block is self-contained. Reorder, remove or duplicate sections without touching the CSS, or open the library page to see them all at once.

  • Navigation (3 blocks)

    Transparent over hero · Solid bordered · Centered logo

  • Announcement (2 blocks)

    Static · Countdown

  • Hero (7 blocks)

    Press slider · Course split · Newsletter masthead · Community avatars · Shop split · Centered editorial · Full-bleed image

  • Logo strip (2 blocks)

    Static hairline grid · Marquee

  • Feature / benefit (4 blocks)

    Numbered list · Alternating 7/5 · Hairline 3-up · Tabbed panel

  • Stats (2 blocks)

    Counter band on accent · Inline hairline row

  • Content (3 blocks)

    Curriculum accordion · Events list · Timeline

  • Media / product (3 blocks)

    Filterable product grid · Featured spotlight · Gallery mosaic

  • Testimonials (3 blocks)

    Pull-quote carousel · Two-up on accent · Portrait cards

  • Pricing (3 blocks)

    Two tiers with payment plan · Three tiers, monthly / annual · Free versus paid comparison

  • FAQ (2 blocks)

    Accordion · Two column

  • Call to action (3 blocks)

    Full-bleed accent band · Inline newsletter · Split with media

  • Forms (3 blocks)

    Inline email capture · Contact · Application

  • Footer (3 blocks)

    Four column with newsletter · Minimal editorial · Mega sitemap

Browse the sections library

06 · Under the hood

Built the way you would build it.

  1. Tailwind CSS 4, compiled

    One stylesheet and one JavaScript bundle. No CDN build, no jQuery, no framework. The design tokens live in CSS, so there is no config file to learn.

  2. Plain HTML you can edit

    Every page is a finished HTML file that opens straight from disk. The Eleventy source ships alongside it for anyone who wants partials and data files.

  3. WCAG 2.2 AA

    Tested with axe-core on every page. Visible focus, a skip link, correct landmarks, focus trapping in the drawer and form errors that screen readers announce.

  4. Works without JavaScript

    Every page renders complete with scripts blocked. Reveals are additive, so nothing waits on a script to become visible.

  5. Motion with a kill switch

    Smooth scrolling, parallax, counters and a carousel, all of which stand down under the reduced motion setting.

  6. Forms ready for a service

    Client-side validation with success and error states. Add one attribute to send submissions to Formspree, Basin or Netlify Forms.

  7. Self-hosted fonts

    Instrument Serif, Geist, Geist Mono and IBM Plex Sans Arabic, subset to WOFF2. No request leaves the page for a font.

  8. Responsive, retina-ready images

    WebP at several widths for every image slot, with blurred loading previews and fixed dimensions so nothing shifts as it loads.

Put your offer in good type.

Open the live demo Read the documentation