## Blog post page design in Figma: measure, rhythm, and rich text

How these blog post pages are built, from the hero and split headers down to the share row and related posts.

The blog post page is the one page on a marketing site people genuinely read, top to bottom, sometimes for several minutes at a time. Everything else on the site is scanned.

That changes what the design is for: the job stops being persuasion and becomes not getting in the way, which is a harder brief than it sounds. Company blogs, changelog entries, engineering write ups and long form case studies all run through this template.

### The measure is the design

Across these examples the article body sits in a 720px column inside a 1,216px content area. Sometimes it is centered, sometimes it is pushed left with a 384px sidebar holding a subscribe card. Either way the text column stays 720px, and that number is doing most of the work.

[Baymard's summary of the research](https://baymard.com/blog/line-length-readability) puts comfortable reading at roughly 50 to 75 characters per line, and [WCAG 1.4.8](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html) caps it at 80. A body column that stretches to the full 1,440px page fails both. If you take one thing from these files, take the column width and leave the rest.

### Rich text built from components, not one text layer

The article body is not a single giant text box. It is a stack of content item instances, each sized to its own content and flowing in Auto Layout, so a subhead, a paragraph, a quote, a [content divider](/content/components/content-dividers/index.html) and an image are separate blocks rather than sections of one long text layer.

A twelve block article and a fifteen block article use the same structure, so reordering a section is a drag rather than a retype, and the treatment of a quote or a caption gets decided once for every post instead of per article. It also keeps the vertical rhythm honest, since the spacing between blocks lives in the layout rather than in stray empty lines.

The mobile version uses the same blocks at 343px wide, so an article you restructure on desktop does not need rebuilding for the phone.

### The parts around the article

The header does the framing. One pattern runs a badge group, a heading, and supporting text across 768px, then a 1,216px by 640px hero image with the author and publish date on the left and a share row of four buttons on the right. Another splits the viewport in half, 720px of image beside 720px of text with an avatar label group at the bottom.

Below the article, most examples close with related posts drawn from a [blog section](/content/components/blog-sections/index.html), a [newsletter CTA](/content/components/newsletter-cta-sections/index.html), and a [footer](/content/components/footers/index.html), which is the sequence that turns one read into a second one. The index pages these articles link back from live in the [blog page examples](/content/components/blogs/index.html), and the openers on their own are the [blog post page headers](/content/components/blog-post-sections/index.html).

### Desktop, mobile, light, and dark

Each example ships as a 1,440px desktop page and a 375px mobile version, both in light and dark mode. On mobile the article runs the full 343px content column and the subscribe card that sat in the desktop sidebar drops below the last paragraph rather than disappearing, which is the right call, since a finished reader is the likeliest subscriber you will get.

Mobile is also where a long post admits its true length: several of these pages run past 7,000px. Reading in the dark version is worth checking rather than assuming, since long body copy at full contrast on a dark background is the fastest way to make an article tiring.

When the article template moves to code, [Untitled UI React blog post pages](/content/react/marketing/blog-post-pages/index.html) are open source, built with Tailwind CSS, with the same measure, typography scale, and content blocks already set up.

FAQs

## Frequently asked questions

Common questions about designing blog post pages in Figma, covering measure, rhythm, and rich text.

### How wide should the text column be on a blog post page?

Around 700px at a 16 to 18px body size, which lands near 65 to 75 characters per line. These examples use 720px inside a 1,216px content area.

[Baymard's research summary](https://baymard.com/blog/line-length-readability) puts the comfortable band at 50 to 75 characters and WCAG caps accessible line length at 80. Full width article text on a 1,440px page is roughly double that, and readers feel it as fatigue long before they name it.

### How do I lay out a long article in Figma without rebuilding it every time?

Treat the body as a stack of content blocks in an Auto Layout frame rather than one long text layer. Paragraphs, subheads, quotes, images and lists become separate instances you can duplicate, reorder and remove.

Spacing then comes from the layout, so an article never ends up held together by empty lines, and pasting in a longer draft pushes the related posts and footer down instead of overlapping them.

### Where should the author details and share buttons go?

Author and publish date belong near the top, under or beside the hero image, because both are credibility signals people check before committing to a read. Share buttons work in either place.

These examples put a four button share row opposite the author details at the top, and one repeats it at the end of the article, which is the more honest moment to ask: people share after reading, not before.

### Are these blog post page examples included in the free version?

The blog post page examples are part of the paid Untitled UI Figma kit. See [pricing](/content/pricing/index.html) for what's included.

The [100% free Figma UI kit](/content/free-figma-ui-kit/index.html) includes core components from the same system, so you can test the typography and spacing before buying anything.

### Is there a React version of these blog post pages?

Yes. [Untitled UI React blog post pages](/content/react/marketing/blog-post-pages/index.html) are open source, built with Tailwind CSS, and mirror these layouts.

That includes the constrained article measure and the rich text styles a CMS will render into.

Figma UI components

## Foundation Figma components and styles

Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.

\\
\\
**Color styles** \\
\\
333 styles](/content/components/color-styles/index.html)

\\
\\
**Typography styles** \\
\\
44 styles](/content/components/typography-styles/index.html)

\\
\\
**Logos** \\
\\
3 components + 372 variants](/content/components/logos/index.html)

\\
\\
**Icons** \\
\\
1,993 components + 352 variants](/content/components/icons/index.html)

\\
\\
**Shadows & blurs** \\
\\
18 styles](/content/components/shadows-blurs/index.html)

\\
\\
**Grids & spacing** \\
\\
38 variants + 8 styles](/content/components/grids-spacing/index.html)

\\
\\
**File type icons** \\
\\
1 component + 153 variants](/content/components/file-icons/index.html)

\\
\\
**Social icons** \\
\\
1 component + 102 variants](/content/components/social-icons/index.html)

\\
\\
**Folder icons** \\
\\
1 component + 8 variants](/content/components/folder-icons/index.html)

\\
\\
**Payment icons** \\
\\
1 component + 112 variants](/content/components/payment-icons/index.html)

\\
\\
**Country flag icons** \\
\\
261 components + 783 variants](/content/components/flag-icons/index.html)

\\
\\
**Integration icons** \\
\\
1 component + 32 variants](/content/components/integration-icons/index.html)

\\
\\
**Cursors** \\
\\
1 component + 50 variants](/content/components/cursors/index.html)

Figma UI components

## Figma base components

Buttons, inputs, avatars—all of the base components you need for modern product design and websites.

\\
\\
**Avatars** \\
\\
280 variants + 98 styles](/content/components/avatars/index.html)

\\
\\
**Badges** \\
\\
3 components + 666 variants](/content/components/badges/index.html)

\\
\\
**Button groups** \\
\\
2 components + 64 variants](/content/components/button-groups/index.html)

\\
\\
**Buttons** \\
\\
5 components + 940 variants](/content/components/buttons/index.html)

\\
\\
**Checkboxes** \\
\\
2 components + 72 variants](/content/components/checkboxes/index.html)

\\
\\
**Context menus** \\
\\
2 components + 32 variants](/content/components/context-menus/index.html)

\\
\\
**Dropdowns** \\
\\
4 components + 143 variants](/content/components/dropdowns/index.html)

\\
\\
**Inputs** \\
\\
7 components + 188 variants](/content/components/inputs/index.html)

\\
\\
**Multi-select** \\
\\
4 components + 21 variants](/content/components/multi-select/index.html)

\\
\\
**Progress indicators** \\
\\
2 components + 65 variants](/content/components/progress-indicators/index.html)

\\
\\
**Radio groups** \\
\\
2 components + 168 variants](/content/components/radio-groups/index.html)

\\
\\
**Select** \\
\\
6 components + 90 variants](/content/components/select/index.html)

\\
\\
**Sliders** \\
\\
2 components + 39 variants](/content/components/sliders/index.html)

\\
\\
**Tags** \\
\\
4 components + 210 variants](/content/components/tags/index.html)

\\
\\
**Toggles** \\
\\
2 components + 64 variants](/content/components/toggles/index.html)

\\
\\
**Tooltips** \\
\\
2 components + 84 variants](/content/components/tooltips/index.html)

Figma UI components

## Shared Figma assets

Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.

\\
\\
**404 page headers** \\
\\
1 component + 28 variants](/content/components/404-page-headers/index.html)

\\
\\
**Banners** \\
\\
1 component + 40 variants](/content/components/banners/index.html)

\\
\\
**Credit cards** \\
\\
1 component + 13 variants](/content/components/credit-cards/index.html)

\\
\\
**Design annotations** \\
\\
7 components + 38 variants](/content/components/design-annotations/index.html)

\\
\\
**Device mockups** \\
\\
7 components + 18 variants](/content/components/device-mockups/index.html)

\\
\\
**Email templates** \\
\\
3 components + 22 variants](/content/components/email-templates/index.html)

\\
\\
**Forgot password headers** \\
\\
1 component + 10 variants](/content/components/forgot-password-headers/index.html)

\\
\\
**Log in page headers** \\
\\
1 components + 32 variants](/content/components/log-in-headers/index.html)

\\
\\
**Miscellaneous assets** \\
\\
3 components + 50 variants](/content/components/miscellaneous-assets/index.html)

\\
\\
**Portfolio mockups** \\
\\
6 variants + 52 templates](/content/components/portfolio-mockups/index.html)

\\
\\
**Sign up page headers** \\
\\
1 component + 42 variants](/content/components/sign-up-headers/index.html)

\\
\\
**Verification page headers** \\
\\
1 component + 6 variants](/content/components/verification-headers/index.html)

\\
\\
**Video players** \\
\\
3 components + 36 variants](/content/components/video-players/index.html)

Figma UI components

## Application UI/Dashboard examples

Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.

\\
\\
**Dashboard examples** \\
\\
60 page examples](/content/components/dashboards/index.html)

\\
\\
**Informational page examples** \\
\\
60 page examples](/content/components/informational-pages/index.html)

\\
\\
**Settings page examples** \\
\\
42 page examples](/content/components/settings-pages/index.html)

Figma UI components

## Application UI/Dashboard Figma components

Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.

\\
\\
**Activity feeds** \\
\\
2 components + 22 variants](/content/components/activity-feeds/index.html)

\\
\\
**Activity gauges** \\
\\
3 components + 34 variants](/content/components/activity-gauges/index.html)

\\
\\
**Alerts** \\
\\
1 component + 24 variants](/content/components/alerts/index.html)

\\
\\
**Application header navigations** \\
\\
5 components + 80 variants](/content/components/application-header-navigations/index.html)

\\
\\
**Breadcrumbs** \\
\\
2 components + 56 variants](/content/components/breadcrumbs/index.html)

\\
\\
**Calendars** \\
\\
12 components + 82 variants](/content/components/calendars/index.html)

\\
\\
**Card headers** \\
\\
1 component + 4 variants](/content/components/card-headers/index.html)

\\
\\
**Carousels** \\
\\
4 components + 22 variants](/content/components/carousels/index.html)

\\
\\
**Code snippets** \\
\\
1 component + 8 variants](/content/components/code-snippets/index.html)

\\
\\
**Color pickers** \\
\\
6 components + 26 variants](/content/components/color-pickers/index.html)

\\
\\
**Command menus (⌘+K)** \\
\\
5 components + 69 variants](/content/components/command-menus/index.html)

\\
\\
**Content dividers** \\
\\
1 component + 18 variants](/content/components/content-dividers/index.html)

\\
\\
**Date pickers** \\
\\
5 components + 68 variants](/content/components/date-pickers/index.html)

\\
\\
**Drawers** \\
\\
2 components + 50 variants](/content/components/drawers/index.html)

\\
\\
**Empty states** \\
\\
2 components + 36 variants](/content/components/empty-states/index.html)

\\
\\
**File uploaders** \\
\\
3 components + 23 variants](/content/components/file-uploaders/index.html)

\\
\\
**Filters** \\
\\
3 components + 38 variants](/content/components/filters/index.html)

\\
\\
**Horizontal tabs** \\
\\
2 components + 280 variants](/content/components/horizontal-tabs/index.html)

\\
\\
**Inline CTAs** \\
\\
1 component + 14 variants](/content/components/inline-ctas/index.html)

\\
\\
**Line & bar charts** \\
\\
9 components + 116 variants](/content/components/line-bar-charts/index.html)

\\
\\
**Loading indicators** \\
\\
1 component + 12 variants](/content/components/loading-indicators/index.html)

\\
\\
**Messaging** \\
\\
3 components + 42 variants](/content/components/messaging/index.html)

\\
\\
**Metrics** \\
\\
4 components + 36 variants](/content/components/metrics/index.html)

\\
\\
**Modals** \\
\\
3 components + 252 variants](/content/components/modals/index.html)

\\
\\
**Notifications** \\
\\
1 component + 18 variants](/content/components/notifications/index.html)

\\
\\
**Page headers** \\
\\
1 component + 12 variants](/content/components/page-headers/index.html)

\\
\\
**Pagination** \\
\\
3 components + 42 variants](/content/components/pagination/index.html)

\\
\\
**Pie charts** \\
\\
3 components + 68 variants](/content/components/pie-charts/index.html)

\\
\\
**Progress circles** \\
\\
1 component + 10 variants](/content/components/progress-circles/index.html)

\\
\\
**Progress steps** \\
\\
7 components + 92 variants](/content/components/progress-steps/index.html)

\\
\\
**Radar charts** \\
\\
3 components + 12 variants](/content/components/radar-charts/index.html)

\\
\\
**Section footers** \\
\\
1 component + 8 variants](/content/components/section-footers/index.html)

\\
\\
**Section headers** \\
\\
1 component + 12 variants](/content/components/section-headers/index.html)

\\
\\
**Sidebar navigations** \\
\\
9 components + 168 variants](/content/components/sidebar-navigations/index.html)

\\
\\
**Tables** \\
\\
4 components + 204 variants](/content/components/tables/index.html)

\\
\\
**Tree views** \\
\\
3 components + 4 variants](/content/components/tree-views/index.html)

\\
\\
**Vertical tabs** \\
\\
2 components + 264 variants](/content/components/vertical-tabs/index.html)

Figma UI components

## Marketing website examples

Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.

\\
\\
**404 page examples** \\
\\
20 page examples](/content/components/404-pages/index.html)

\\
\\
**About page examples** \\
\\
20 page examples](/content/components/about-pages/index.html)

\\
\\
**Blog examples** \\
\\
20 page examples](/content/components/blogs/index.html)

\\
\\
**Blog post examples** \\
\\
20 page examples](/content/components/blog-posts/index.html)

\\
\\
**Contact page examples** \\
\\
20 page examples](/content/components/contact-pages/index.html)

\\
\\
**FAQ page examples** \\
\\
20 page examples](/content/components/faq-page-examples/index.html)

\\
\\
**Landing page examples** \\
\\
40 page examples](/content/components/landing-pages/index.html)

\\
\\
**Legal page examples** \\
\\
10 page examples](/content/components/legal-pages/index.html)

\\
\\
**Log in page examples** \\
\\
12 page examples](/content/components/log-in-pages/index.html)

\\
\\
**Pricing page examples** \\
\\
20 page examples](/content/components/pricing-pages/index.html)

\\
\\
**Sign up page examples** \\
\\
12 page examples](/content/components/sign-up-pages/index.html)

\\
\\
**Team page examples** \\
\\
20 page examples](/content/components/team-pages/index.html)

Figma UI components

## Marketing website components

Landing page header and website sections—everything you need to design modern and responsive marketing websites.

\\
\\
**Blog post sections** \\
\\
3 components + 102 variants](/content/components/blog-post-sections/index.html)

\\
\\
**Blog sections** \\
\\
4 components + 84 variants](/content/components/blog-sections/index.html)

\\
\\
**Careers sections** \\
\\
2 components + 38 variants](/content/components/careers-sections/index.html)

\\
\\
**Contact sections** \\
\\
6 components + 106 variants](/content/components/contact-sections/index.html)

\\
\\
**Content & rich text sections** \\
\\
2 components + 78 variants](/content/components/content-sections/index.html)

\\
\\
**CTA sections** \\
\\
1 component + 60 variants](/content/components/cta-sections/index.html)

\\
\\
**FAQ sections** \\
\\
2 components + 72 variants](/content/components/faq-sections/index.html)

\\
\\
**Features sections** \\
\\
2 components + 122 variants](/content/components/features-sections/index.html)

\\
\\
**Footers** \\
\\
5 components + 192 variants](/content/components/footers/index.html)

\\
\\
**Header navigations** \\
\\
10 components + 397 variants](/content/components/header-navigations/index.html)

\\
\\
**Header sections** \\
\\
2 components + 148 variants](/content/components/header-sections/index.html)

\\
\\
**Metrics sections** \\
\\
2 components + 42 variants](/content/components/metrics-sections/index.html)

\\
\\
**Newsletter CTA sections** \\
\\
1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)

\\
\\
**Press mentions sections** \\
\\
1 component + 4 variants](/content/components/press-mentions-sections/index.html)

\\
\\
**Pricing sections** \\
\\
5 components + 88 variants](/content/components/pricing-sections/index.html)

\\
\\
**Social proof sections** \\
\\
1 component + 20 variants](/content/components/social-proof-sections/index.html)

\\
\\
**Team sections** \\
\\
2 components + 56 variants](/content/components/team-sections/index.html)

\\
\\
**Testimonial sections** \\
\\
3 components + 92 variants](/content/components/testimonial-sections/index.html)

The ultimate UI kit for Figma

## What is Untitled UI?

Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.

Untitled UI in 60 seconds

The ultimate Figma UI kit \| Untitled UI from Untitled UI on Vimeo

Playing in picture-in-picture

Pause

Speed

Picture-in-Picture

Show controls

2x

1.5x

1.25x

1x

0.75x

0.5x

\\
Preview in Figma](/content/preview/figma/index.html)

[Buy now](/content/buy/figma/index.html)

Join 380,000+ designers from the world's top companies

### Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.

Sam Pierce Lolla

Founder, [Shuffleboard](https://getshuffleboard.com/)

### Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!

Luca Vavassori

Founder, [UXCrush](https://www.uxcrush.com/)

### I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.

Murat Alpay

Product Designer, [@imuratalpay](https://twitter.com/imuratalpay)

### Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.

Jérémy Franck

Designer, [@jrmyfranck](https://jrmyfranck.com/)

### Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.

Adham Dannaway

Product Designer, [Practical UI](https://www.practical-ui.com/)

### Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!

Riccardo Buzzotta

Senior Product Designer, [Spotify](https://www.spotify.com/)

### The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.

Corey Moen

Senior Brand Designer, [Webflow](https://www.webflow.com/)

### I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.

Matt Walker

Design Systems, [Mailchimp](https://mailchimp.com/)

### I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.

Jenny Chu

Head of Product, [Eucalyptus](https://eucalyptus.vc/)

### Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.

Sunny Trochaniak

Founder, [NewPulse Labs](https://newpulselabs.com/untitled-ui-review/)

### The attention to detail and thought Jordan has put into this UI kit is unparalleled.

Dan Mcleay

Lead Designer, [Fox Sports](https://www.foxsports.com.au/)

### Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.

Tom Bekkers

Founder & Creative Director, [Flowbase](https://www.flowbase.co/)

### What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.

Dan Anisse

Co-founder, [Relume](https://www.relume.io/)

### We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.

Abi Tyas Tunggal

Co-founder, [Himalayas](https://www.himalayas.app/)

### Join our affiliate program

A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!

[Become an affiliate](/content/affiliates/index.html)

Untitled UI in 60 seconds

[open lightbox](/content/components/blog-posts#/index.html)