Blocks/Blog(44)

Blog list layouts and post grid components.

PRO

blog67

Series Index With Standing State

An index of writing that was planned as runs rather than posts, pairing each series and how far along it is with its numbered parts in the column beside it.

PRO

blog66

Topic Cards With Resource Counts

Three tinted topic cards, each stamped with how many pieces sit behind it, the topic name, and an image filling the lower half, alongside a link out to the full topic index.

PRO

blog65

Lead Story With Thumbnail Rail

A lead article carrying its own wide image, excerpt and byline next to a rail of further posts reduced to a thumbnail and a title, so one story clearly outranks the rest.

PRO

blog64

Curated Reading List With Thumbnails

A curated reading list under a left-aligned header, laid out as two columns of linked rows where a wide thumbnail sits beside the article title and nothing else competes with it.

PRO

blog63

Topic Hub Card With Resource List

A topic hub card whose left third is a photo panel with the topic title set on a scrim over it, next to a two-column body: a short summary on one side and the posts belonging to the topic listed by title alone on the other.

PRO

blog62

Newsletter Panel With Back Issues

A blog section splitting a bordered container between the newsletter pitch with a cadence line on a hairline and an image tile holding a working subscribe row, over three linked back issues.

FREE

blog61

Filterable Archive Index

A dense blog archive whose subject pills are derived from the posts themselves and carry live counts, filtering a two-column list of hairline rows stamped with a date and a reading time.

PRO

blog60

Featured Article With Recent List

A blog section pairing one linked feature with a hover-zoom image, category label, and byline against a hairline list of five recent posts stamped with their date.

PRO

blog56

Category Mosaic

A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it.

PRO

blog55

Press Release Wall

A three-column wall of image-free press release cards on soft muted surfaces under a parenthetical eyebrow and a large heading, each card pairing a release type and date with a headline, dek, byline, and a ruled category row.

PRO

blog54

Pinned Lead Newsroom

A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive.

PRO

blog53

Mixed Release Masonry

A press office masonry wall under a parenthetical eyebrow and a large heading, mixing photo cards with image-free release cards on soft muted surfaces, each release card closing on a read-through line with a corner arrow.

PRO

blog52

Newsroom Masonry

A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm.

PRO

blog51

Mixed Tile Mosaic

A six-slot mosaic under a parenthetical eyebrow and a large heading, mixing full-bleed photo tiles with flat text tiles on muted and inverted surfaces, where the treatment belongs to the slot and every tile advances one story through a larger article pool on a timer, staggered 100 milliseconds apart so the refresh reads as a wave running left to right, pausing on hover, focus, hidden tabs, and reduced motion.

PRO

blog50

Magazine Mosaic

A six-slot magazine mosaic with a parenthetical eyebrow and a large heading, pairing a dominant two-by-two tile with a tall tile, wide tiles, and unit tiles that each caption their photo over a graded scrim.

PRO

blog49

Quad Ledger

An image-free newsroom index with a square eyebrow, a two-column heading band over a hairline rule, four linked release cards that each pair an accent counter with a kicker, headline, dek, and byline, and a seal button to the full archive.

PRO

blog48

Quad Grid

A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.

PRO

blog47

Bulletin Columns

A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.

PRO

blog46

Front Page Columns

A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards.

PRO

blog45

Press Room Digest

A press room listing with a square eyebrow, a bold heading and intro over a hairline rule, a wide lead release with a panoramic image, and the remaining releases stacked as ruled rows that pair a date column with a release type, headline, dek, and a square arrow chip.

PRO

blog44

Newsroom Lead and Index

A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.

PRO

blog59

Journal Card Trio

Three linked journal cards, each with a four-by-three image, a category, a display title, an excerpt and a ruled byline pinned to the bottom of the card so uneven excerpts still align.

PRO

blog58

Ruled Writing Index

Image-free article index where every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, stacking to a readable block on mobile.

FREE

blog57

Journal Lead And Index

Editorial journal preview pairing one lead entry with a wide image, category, title, excerpt and date against a ruled index of three shorter entries, headed by an eyebrow, a display heading and an outline pill CTA.

Markdown version