Frankli How It Works Section

Frankli How It Works Section, dark-mode, minimal, dark

Preview image. Unlock full-res

Dark three-column process layout with serif column headings, dotted dividers, and a "Know more" link with an arrow in each column.

Summary

A dark navy "How it works" block laid out as three text columns, each with a serif heading, a paragraph, and a dotted-rule-separated "Know more" link with a right arrow.

Visual description

Deep navy background. Top-left has a small rounded "How it works" pill badge, then a two-line serif headline ("Discover the power of Frankli.") in white. Below, a three-column grid divided by faint vertical rules holds "Engagement", "Management", and "Growth & Development", each a serif column title over three lines of muted sans-serif body copy. Near the bottom of each column a thin dotted horizontal rule separates the copy from a "Know more" label paired with a long right-pointing arrow. The columns are otherwise empty of imagery, keeping the section purely typographic.

Key takeaway

The disciplined, image-free three-column structure that reads as a clean step or pillar breakdown using only type, faint column rules, and a dotted divider above each arrow link. The long thin arrows give the "Know more" links a refined, editorial pull.

Reuse notes

Use when you want a calm, text-led overview of three benefits or steps without competing visuals. The dotted divider plus arrow pattern is a tidy way to footer each column with a link. Relies on a strong serif and generous spacing; on a busy page it could read as sparse.

More process sections

See all

More like this