Blog Cards
Sections that show articles to readers: card grids and features, lists and indexes, the panels that sit beside a post, and the controls for browsing.
Each one installs on its own. Preview it at desktop, tablet or mobile width, in either direction. New to blocks? Start with the introduction.
In Filter Sidebar + Results the filter rail does not stick to the top of the screen at 1024px and wider: no variant draws a sticky rail, so it scrolls with the page.
Showing 21 types
Classic 3-Up Grid
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-classic-3-up-gridFeatured + Two-Up
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-featured-two-upCompact 4-Up Thumb Grid
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-compact-4-up-thumb-gridBento Editorial Grid
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-bento-editorial-gridSplit Feature
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-split-featureLead + Ranked Picks
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-lead-ranked-picksOverlay Photo Trio
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-overlay-photo-trioDark Editorial Feature
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-dark-editorial-featureLeft-Thumb Row Cards
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-left-thumb-row-cardsHairline Text Index
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-hairline-text-indexNumbered Reading List
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-numbered-reading-listMagazine Cover Story
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-magazine-cover-storyPull-Quote Feature
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-pull-quote-featureFilter Sidebar + Results
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-filter-sidebar-resultsSearch + Chips + Results
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-search-chips-resultsPost Carousel with Controls
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-post-carousel-with-controlsNewsletter + Latest
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-newsletter-latestLatest / Popular Split
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-latest-popular-splitAuthor Spotlight
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-author-spotlightRelated Posts Strip
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-related-posts-stripJournal Bento
Open full screen (opens in a new tab)Install
bash
npx @smicolon/fasla-ui@latest add blog-cards-journal-bento