The book

Fourteen chapters, zero filler

Every chapter ends with a small project you can drop into your own work.

Chapter 1: The cascade, for real
Specificity, layers and inheritance without guesswork.
24 pages
Chapter 2: The box model and flow
Sizing, margins and the logical properties.
22 pages
Chapter 3: Intrinsic layouts
Grid, flexbox and container queries.
Free sample 42 pages
Chapter 4: Typography that scales
Fluid type, rhythm and readable measures.
26 pages
Chapter 5: Design tokens
Colors, spacing and type with Sass and custom properties.
30 pages
Chapter 6: Theming and dark mode
One markup, many styles.
28 pages

+ 8 more chapters: components, forms, motion, accessibility, testing, performance, architecture and the capstone.

@use 'sprucecss/scss/spruce' as *;

.book-preview-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    align-items: start;
    display: grid;
    gap: spacer-clamp('l', 'xl');

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    }
  }

  &__aside {
    display: flex;
    flex-direction: column;
    gap: spacer('l');

    @include breakpoint('lg') {
      inset-block-start: spacer('l');
      position: sticky;
    }
  }

  &__cover {
    display: flex;
    justify-content: center;
    padding-block: spacer('s');
  }

  &__details {
    display: grid;
    gap: spacer('s');
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: 0;
    text-align: center;
  }

  &__detail {
    @include layout-stack('xxs');

    dt {
      color: color('muted');
      font-size: config('font-size-sm', $typography);
      font-weight: 400;
    }

    dd {
      color: color('heading');
      font-weight: 700;
      margin-inline: 0;
    }
  }

  &__form {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    box-shadow: shadow('md');
    padding: spacer('m');
    @include layout-stack('s');
  }

  &__form-heading {
    @include layout-stack('xxs'); // title, text
  }

  &__form-title {
    font-size: font-size('h4');
  }

  &__form-text,
  &__note {
    color: color('muted');
  }

  &__note,
  &__consent {
    font-size: config('font-size-sm', $typography);
  }

  &__field {
    display: flex;
    flex-direction: column;
    gap: spacer('xs');
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__chapters {
    border-block-start: config('border-width-base', $display) solid color('border');
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__chapter {
    align-items: center;
    border-block-end: config('border-width-base', $display) solid color('border');
    display: grid;
    gap: spacer('xs') spacer('m');
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: spacer('m');
    padding-inline: spacer('s');

    @include breakpoint('sm') {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    &--free {
      background-image: linear-gradient(90deg, #{color-alpha('success', 0.1, 'alert')}, transparent 70%);
    }
  }

  &__number {
    color: color('primary');
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h3');
    font-variant-numeric: tabular-nums;
    font-weight: config('font-weight-heading', $typography);
    inline-size: 2.5ch;
  }

  &__chapter-body {
    @include layout-stack('xxs'); // title, text
  }

  &__chapter-title {
    font-size: font-size('h5');
  }

  &__chapter-text {
    color: color('muted');
  }

  &__pages {
    align-items: center;
    color: color('muted');
    display: flex;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs');
    grid-column: 2;
    margin-block: 0;
    white-space: nowrap;

    @include breakpoint('sm') {
      grid-column: auto;
    }
  }

  &__more {
    color: color('muted');
    margin-block: 0;
  }
}

[dir='rtl'] .book-preview-block__chapter--free {
  background-image: linear-gradient(270deg, #{color-alpha('success', 0.1, 'alert')}, transparent 70%);
}

<section class="book-preview-block" id="book-preview" aria-labelledby="book-preview-title">
    <div class="container">
        <div class="book-preview-block__inner">
            <div class="book-preview-block__aside">
                <div class="book-preview-block__cover">
                    <div class="book-cover" role="img" aria-label="The cover of Modern CSS, Explained by Daniel Okafor">
                        <div class="book-cover__front">
                            <p class="book-cover__edition">2nd edition</p>
                            <div class="book-cover__heading">
                                <p class="book-cover__title">Modern CSS, Explained</p>
                                <p class="book-cover__subtitle">From the cascade to design systems</p>
                            </div>
                            <p class="book-cover__author">Daniel Okafor</p>
                        </div>
                    </div>
                </div>
                <dl class="book-preview-block__details">
                    <div class="book-preview-block__detail">
                        <dt>Pages</dt>
                        <dd>380</dd>
                    </div>
                    <div class="book-preview-block__detail">
                        <dt>Formats</dt>
                        <dd>PDF, EPUB, Kindle</dd>
                    </div>
                    <div class="book-preview-block__detail">
                        <dt>Updated</dt>
                        <dd>September 2026</dd>
                    </div>
                </dl>
                <form class="book-preview-block__form" action="#" method="post" aria-labelledby="book-preview-form-title">
                    <div class="book-preview-block__form-heading">
                        <h3 class="book-preview-block__form-title" id="book-preview-form-title">Read chapter 3 for free</h3>
                        <p class="book-preview-block__form-text">Get “Intrinsic layouts” (42 pages) in your inbox, plus the table of contents.</p>
                    </div>
                    <div class="book-preview-block__field">
                        <label class="sr-only" for="book-preview-email">Email address</label>
                        <input class="form-control" id="book-preview-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required>
                        <button class="btn btn--primary" type="submit">
                            <svg class="btn__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>
</svg>
                            Send me the chapter
                        </button>
                    </div>
                    <label class="form-check book-preview-block__consent" for="book-preview-consent">
                        <input class="form-check__control" id="book-preview-consent" name="consent" type="checkbox" required>
                        <span class="form-label form-check__label">I agree to receive the chapter and occasional emails about the book, and accept the <a href="#">privacy policy</a>.</span>
                    </label>
                    <p class="book-preview-block__note">No spam. Unsubscribe with one click.</p>
                </form>
            </div>
            <div class="book-preview-block__content">
                <header class="block-heading block-heading--start">
                    <p class="block-heading__eyebrow">The book</p>
                    <h2 class="block-heading__title" id="book-preview-title">Fourteen chapters, zero filler</h2>
                    <p class="block-heading__text">Every chapter ends with a small project you can drop into your own work.</p>
                </header>
                <ol class="book-preview-block__chapters" role="list">
                    <li class="book-preview-block__chapter">
                        <span class="book-preview-block__number" aria-hidden="true">01</span>
                        <div class="book-preview-block__chapter-body">
                            <h3 class="book-preview-block__chapter-title"><span class="sr-only">Chapter 1: </span>The cascade, for real</h3>
                            <p class="book-preview-block__chapter-text">Specificity, layers and inheritance without guesswork.</p>
                        </div>
                        <p class="book-preview-block__pages">24 pages
                        </p>
                    </li>
                    <li class="book-preview-block__chapter">
                        <span class="book-preview-block__number" aria-hidden="true">02</span>
                        <div class="book-preview-block__chapter-body">
                            <h3 class="book-preview-block__chapter-title"><span class="sr-only">Chapter 2: </span>The box model and flow</h3>
                            <p class="book-preview-block__chapter-text">Sizing, margins and the logical properties.</p>
                        </div>
                        <p class="book-preview-block__pages">22 pages
                        </p>
                    </li>
                    <li class="book-preview-block__chapter book-preview-block__chapter--free">
                        <span class="book-preview-block__number" aria-hidden="true">03</span>
                        <div class="book-preview-block__chapter-body">
                            <h3 class="book-preview-block__chapter-title"><span class="sr-only">Chapter 3: </span>Intrinsic layouts</h3>
                            <p class="book-preview-block__chapter-text">Grid, flexbox and container queries.</p>
                        </div>
                        <p class="book-preview-block__pages"><span class="badge badge--success">Free sample</span> 42 pages
                        </p>
                    </li>
                    <li class="book-preview-block__chapter">
                        <span class="book-preview-block__number" aria-hidden="true">04</span>
                        <div class="book-preview-block__chapter-body">
                            <h3 class="book-preview-block__chapter-title"><span class="sr-only">Chapter 4: </span>Typography that scales</h3>
                            <p class="book-preview-block__chapter-text">Fluid type, rhythm and readable measures.</p>
                        </div>
                        <p class="book-preview-block__pages">26 pages
                        </p>
                    </li>
                    <li class="book-preview-block__chapter">
                        <span class="book-preview-block__number" aria-hidden="true">05</span>
                        <div class="book-preview-block__chapter-body">
                            <h3 class="book-preview-block__chapter-title"><span class="sr-only">Chapter 5: </span>Design tokens</h3>
                            <p class="book-preview-block__chapter-text">Colors, spacing and type with Sass and custom properties.</p>
                        </div>
                        <p class="book-preview-block__pages">30 pages
                        </p>
                    </li>
                    <li class="book-preview-block__chapter">
                        <span class="book-preview-block__number" aria-hidden="true">06</span>
                        <div class="book-preview-block__chapter-body">
                            <h3 class="book-preview-block__chapter-title"><span class="sr-only">Chapter 6: </span>Theming and dark mode</h3>
                            <p class="book-preview-block__chapter-text">One markup, many styles.</p>
                        </div>
                        <p class="book-preview-block__pages">28 pages
                        </p>
                    </li>
                </ol>
                <p class="book-preview-block__more">+ 8 more chapters: components, forms, motion, accessibility, testing, performance, architecture and the capstone.</p>
            </div>
        </div>
    </div>
</section>

Book Preview

Technical Details

It combines the Book Cover and the Badge; load their stylesheets too.
The chapters are an ordered list; the big chapter numbers are decorative and every title starts with a hidden "Chapter 3:", so the number is read once.
The free chapter is marked with a text badge ("Free sample") and a light success tint; the tint alone wouldn't tell anything to screen reader users. The gradient mirrors in RTL.
The sample form is a lead magnet: an email field with a hidden label, labelled by its title. On wide screens the cover and the form stay in view (position: sticky) while the chapters scroll.
The block has id="book-preview", so the hero and the offer can link to it.
Override the content with bookPreviewBlock.
The form has a required GDPR consent checkbox, unchecked by default (consent must be an active choice), with a link to the privacy policy. Keep the wording specific: what the person signs up for and how to unsubscribe. Store the consent with a timestamp on the server.