Inline CTAs — DrumKit

Demo

hero

In context

in-context

View in a page

Family

family

Six parts from one module; the seven Types compose them.

What’s new

InlineCTA.Root

InlineCTA.Media

Types

cells

The sheet's seven Types, each its own preset.

New feature available

Check out the new dashboard view. Pages now load faster.

Actions: InlineCTAActions

Explore the new gallery templates

Twelve fresh layouts, ready to apply to any shoot.

Image: InlineCTAImage

Subscribe to our newsletter

Get the latest posts and product news, once a month.

Email field: InlineCTAEmailField

Change your plan

Upgrade or downgrade at any time. Changes are prorated.

Growth

$20per month

Everything in Basic, plus unlimited projects and priority support.

Change plan: InlineCTAChangePlan

Upgrade your plan

You’re on the free plan. Here is what the team plan adds.

Unlimited seats
Invite the whole team, not just the people who edit.
Full version history
Roll any document back to any point in the last year.

Upgrade plan: InlineCTAUpgradePlan

Payment method

Change how you pay for your plan.

Visa ending in 1234

Expiry 06/2028

billing@drumkit.design

Payment method: InlineCTAPaymentMethod

Your receipt is ready

Your invoice for August 2026 has been issued.

Invoice 007.pdf

720 KB

Receipt: InlineCTAReceipt

Layouts

cells

Below sm, in a real viewport at the sheet's Mobile frame width.

Mobile breakpoint

Actions at phone width: stacked actions, primary on top

Image at phone width: the rail on top, full width

Email field at phone width: a column, full-width submit

Change plan at phone width: stacked actions inside the card

Upgrade plan at phone width: the list unchanged, actions stacked

Payment method at phone width: Edit without its chrome

Receipt at phone width: the card's chrome gone, children stacked

Action row

from sm: a row, secondary first, primary last

below sm: stacked full width, primary on top, DOM order unchanged

Tones

cells

InlineCTA.Card

Basic plan

Up to 10 users and 20GB of storage.

tone primary: Payment method and Receipt

Basic plan

Up to 10 users and 20GB of storage.

tone alt: Change plan

Content

cells

The gallery, proofing and delivery workflow has a new home in the sidebar

Check out the new dashboard view. Pages now load faster.

Actions, a long title wraps

New feature available

Actions, no description

New feature available

Check out the new dashboard view. Pages now load faster.

Actions, one action

Upgrade your plan

You’re on the free plan. Here is what the team plan adds.

Unlimited seats
Full version history
Roll any document back to any point.

Upgrade plan, a feature without a description

Your receipt is ready

Your invoice for August 2026 has been issued.

Invoice-2026-08-gallery-sessions-retouching-and-print-orders-final.pdf

1.2 MB

Receipt, a long file name in a narrow column

Change your plan

Upgrade or downgrade at any time. Changes are prorated.

Growth

$240

Billed once a year.

Change plan, no period

Loading

cells

Payment method

description present, both real

description absent, title real

States

cells

The Email field's two props, and the buttons' own states.

Email field

Subscribe to our newsletter

Get the latest posts and product news, once a month.

hint

Subscribe to our newsletter

Get the latest posts and product news, once a month.

isInvalid: the hint as the error

Action buttons

hover and focus each control

isDisabled on both

isLoading on the primary