MODULE — M05

CTA slab

The cream block where you ask for the work.

The slab

ONE SLOT OPEN THIS QUARTER Bring me the part nobody wants to estimate.

Thirty minutes, no deck, no obligation.

HTML

<div class="cta-slab" style="width:100%">
  <svg class="cta-slab-watermark" viewBox="0 0 120 120" aria-hidden="true">
    <g fill="none" stroke="currentColor" stroke-width="6" stroke-linejoin="round">
      <path d="M66 24 L90 24 L90 48 L66 48 Z"></path>
      <path d="M42 48 L90 48 L90 72 L42 72 Z"></path>
      <path d="M18 72 L90 72 L90 96 L18 96 Z"></path>
    </g>
  </svg>
  <div class="cta-slab-body">
    <span class="cta-slab-kicker">ONE SLOT OPEN THIS QUARTER</span>
    <span class="cta-slab-title">Bring me the part nobody wants to estimate.</span>
  </div>
  <div class="cta-slab-action">
    <a href="#" class="btn btn-on-cream">BOOK AN INTRO CALL</a>
    <p class="cta-slab-note">Thirty minutes, no deck, no obligation.</p>
  </div>
</div>

The same block, closing instead of asking

cta-slab-quiet takes the band's own ground instead of cream, and cta-slab-centre puts everything on one centred column. A page may carry one of each: the quiet one is not a second warm surface, so the cream keeps its job as the only thing that looks like that. The button flips back to btn-primary — the inversion only holds on cream.

Sixteen pixels and an afternoon

The cloud at the top of this page is 16x16 and four layers. That is the whole barrier to entry.

DOWNLOAD IT

HTML

<div class="cta-slab cta-slab-quiet cta-slab-centre" style="width:100%">
  <div class="cta-slab-body">
    <svg class="icon icon-xl" viewBox="0 0 120 120" aria-hidden="true">
      <g fill="none" stroke="currentColor" stroke-width="6" stroke-linejoin="round">
        <path d="M66 24 L90 24 L90 48 L66 48 Z"></path>
        <path d="M42 48 L90 48 L90 72 L42 72 Z"></path>
        <path d="M18 72 L90 72 L90 96 L18 96 Z"></path>
      </g>
    </svg>
    <span class="cta-slab-title">Sixteen pixels and an afternoon</span>
    <p class="cta-slab-note">The cloud at the top of this page is 16x16 and four layers. That is the whole barrier to entry.</p>
  </div>
  <div class="cta-slab-action">
    <a href="#" class="btn btn-primary">DOWNLOAD IT</a>
  </div>
</div>

Reference

Read from modules/cta-slab.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.cta-slab.cta-slab-watermark.cta-slab-body.cta-slab-action.cta-slab-quiet.cta-slab-kicker.cta-slab-note.cta-slab-centre.cta-slab-title

SETTINGSSet the first on one element; a theme sets the second for all of them.--cta-shadow — falls back to --ds-shadow-raised

READS--ds-cream--ds-cta-col--ds-cta-gap--ds-cta-mark-offset--ds-cta-mark-size--ds-cta-measure--ds-cta-pad--ds-font-body--ds-font-display--ds-gap-loose--ds-ink--ds-ink-on-cream--ds-ink-soft--ds-muted-on-cream--ds-radius--ds-text-caption--ds-text-h2--ds-text-label--ds-track-meta--ds-track-tight--ds-weight-display

Notes

ONE PER PAGE

It is the single warm surface in a dark design and its whole power is that nothing else looks like it. Two on a page and neither is the thing to do next.

The button inside is .btn-on-cream, not .btn-primary. On this ground the roles invert: the dark button is the emphatic one, and a cream button on cream is invisible.

The watermark is clipped by the slab rather than sized to fit. Sizing it to fit makes it a picture; letting it run off the corner makes it a texture, which is the intent.