## Blog page design in Figma: card grids, filters, and pagination

How these blog index pages are built, and what each card grid, filter, and pagination layout does.

A blog index is a routing page. Nobody arrives to read it, they arrive to pick something, and the pick happens in two or three glances at a headline, a category, and a thumbnail.

Company blogs, changelogs, newsrooms and resource libraries all land on this page, and they mostly fail the same way: forty cards of identical weight and nothing to look at first.

### Card density is the real decision

The examples here take different positions on how much to show at once. One fills a 1,216px content area with two 592px cards per row, four rows deep, and closes with a pagination row. Another sets a 400px heading and button column beside a stack of two wider 752px cards, which reads as an edited highlight rather than an archive. Both work.

The mistake is drifting into one of them by accident. [Nielsen Norman Group's definition of the card component](https://www.nngroup.com/articles/cards-component/) is a useful check before you commit: cards suit browsing and mixed content types, while a dated list beats them when people are hunting for one specific post. Three hundred posts of the same kind do not need three hundred cards.

Column count is the second lever. A three column grid of 384px cards fits nine tiles above the pagination row, and one example spends a tile on a subscribe card instead of a tenth post, which is a better placement than the newsletter band everyone scrolls past at the bottom. That same layout puts a 168px sort select on the same line as the category tabs, so filtering and ordering share one row rather than competing for the top of the page.

### Filters, pagination, and the parts around the grid

A blog index is mostly other components arranged well. Above the grid sits a 637px row of [horizontal tabs](/content/components/horizontal-tabs/index.html) acting as a category filter, and a full width [pagination](/content/components/pagination/index.html) component sits under the last row of cards. Below that, most of these pages run a [newsletter CTA section](/content/components/newsletter-cta-sections/index.html) and a [footer](/content/components/footers/index.html), and several add a second band of posts built from a [blog section](/content/components/blog-sections/index.html) so recent and featured posts can be separated without a second template. Because the page is assembled from those pieces, swapping the two column grid for the highlight layout is a component swap, not a redesign.

The blog post card itself is a 320px image beside a 256px column holding a label line, a headline, two lines of supporting text, and an author avatar row, which is roughly as much as anyone reads before deciding. In the two column grid its height is pinned at 213px, so rows stay aligned when one headline runs long.

The pages behind the cards are the [blog post page examples](/content/components/blog-posts/index.html), built from the [blog post page headers](/content/components/blog-post-sections/index.html) and content items.

### Long pages, small screens, and prototyping the scroll

Every example exists as a 1,440px desktop page and a 375px mobile version, in light and dark mode. The mobile numbers are the ones worth looking at: a grid that fits comfortably on desktop becomes a scroll of roughly 4,000 to 6,700px on a phone, and a newsletter block placed after twelve stacked cards is a newsletter block almost nobody reaches.

When you prototype it, set the page frame to vertical overflow and mark the navigation as fixed so the header stays put while the cards move, which Figma's guide to [scroll and overflow behavior](https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-behavior) covers in detail. Sticky is the other option, and it is the right one when the filter row should pin under the nav rather than scroll away.

When the design is settled, the same pages exist in code. [Untitled UI React blog pages](/content/react/marketing/blog-pages/index.html) are open source, built with Tailwind CSS, assembled from the same sections, so the card grid you spaced in Figma is the card grid that ships.

FAQs

## Frequently asked questions

Common questions about designing blog index pages in Figma with Untitled UI, covering filters and cards.

### How many blog posts should show before pagination?

Eight is a sensible default and it is what the two column examples here use: four rows of two cards, then a pagination row. Enough to show range, short enough that the newsletter block and footer still get seen.

Load more and infinite scroll both look tidier in a mockup, but pagination is the only one of the three that gives you shareable page URLs and a visible end.

### Should blog posts be shown as cards or as a list?

Cards when the posts differ from each other and people are browsing, since the thumbnail and category do real sorting work. A list when the archive is long and homogeneous, because scanning twenty titles in a column is faster than scanning twenty cards. [NN/g makes the same split](https://www.nngroup.com/articles/cards-component/).

Plenty of good blogs do both: cards for the recent few, a list for everything older.

### How do I prototype a scrolling blog page in Figma?

Set the page frame to vertical overflow, then set the header navigation to fixed so it stays in place while the cards scroll behind it. If you want the category tabs to pin under the nav instead of leaving with the content, set them to sticky rather than fixed.

The 375px mobile versions are the ones worth testing this way, since that is where the page length actually bites.

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

The blog 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) covers core components from the same system if you want to try the foundations first, and anything you build on them carries over.

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

Yes. [Untitled UI React blog pages](/content/react/marketing/blog-pages/index.html) are open source, built with Tailwind CSS from the same sections.

So a developer assembles the coded index the same way you assembled the design, cards and pagination included.

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/blogs#/index.html)