Actions

Closing call to action

The end of a book or app page: the claim once more, the one action, and the small print.

01

Examples

Closing call to action (Hirsla)Open “Closing call to action (Hirsla)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

02

When to use it

Book and app pages, as the last section before the home ending.

Live: Unresolved, Hirsla.

03

Anatomy

Heading
.buy-end h2: 30/36, 48/54 desktop.
Text
.p.
Action
.btn-row with the button.
Links
.close-links: secondary links, 16/28.
Small print
.close-fine or .buy-note, secondary ink.
04

Behaviour

Phone, tablet, desktop
Starts 96px after the last section, 176 from 1024.
Motion
None.
05

Accessibility

A section with a heading; the action is a real link.

06

Words

The same action words as the band.

07

Code

Classes: .buy-end .close-links .close-fine .buy-note. Styles in site/assets/css/site.css.

<div class="buy-end">
<div class="sec-rule"></div>
<h2>Share it. Ask for it later.</h2>
<p class="p">Hirsla is on the App Store. The link opens it on your iPhone, iPad, or Mac.</p>
<a class="btn" href="https://apps.apple.com/app/id6822626690" rel="noopener noreferrer" target="_blank">Get it on the App Store<span aria-hidden="true"> ↗</span></a>
<p class="close-links"><a href="/hirsla/whats-new/">What’s new</a> · <a href="/hirsla/links/">Links</a> · <a href="/hirsla/support/">Support</a> · <a href="/hirsla/privacy/">Privacy</a> · <a href="/hirsla/legal/">Legal</a></p>
<p class="fine close-fine">Apple Intelligence, Apple Pencil, Apple Watch, Apple Maps, App Store, iCloud, iPad, iPhone, Mac, and macOS are trademarks of Apple Inc. Hirsla is a private side project and has nothing to do with my employer.</p>
</div>