AIブログセクション生成ツール。

Create a blog preview section with a section heading, a one-line subheading and a three-column card grid. Each card holds a 16:9 cover image in a fixed aspect-ratio box, a category pill above the title, a two-line title clamped with line-clamp-2, a two-line excerpt clamped with line-clamp-2, and a footer row with author name, publish date in a time element with a machine-readable datetime, and a reading-time estimate. Make the whole card one link with the heading as the accessible name rather than adding a separate Read more link. Below the grid, a centred View all posts link. Two columns on tablet, one on mobile, with the cover images lazy loaded.

Create an asymmetric blog section: on the left, a featured post card taking about 60% of the width with a large 3:2 cover image, a category pill, a headline at display size, a three-line excerpt and an author row with avatar, date and reading time. On the right, three compact cards stacked vertically, each with a small square thumbnail on the left and a category, a two-line clamped title and a date on the right. Divide the stacked cards with hairline rules rather than shadows so they read as a list next to the feature. Stack the feature above the list on tablet and below on mobile, keeping the feature image eager loaded.

Create a blog index section: a page heading, a horizontal row of category filter chips, and a nine-card grid at three columns. Each card carries a cover image in a fixed 16:9 box, a category pill, a clamped two-line title, a clamped two-line excerpt, and a meta row with author, a time element for the date and a reading time. Below the grid, numbered pagination with previous and next controls, aria-current on the active page, and real anchor hrefs to /blog/page/2 so pages are crawlable and linkable rather than swapped in by client state. Show a labelled empty state when a filter returns nothing. Two columns on tablet, one on mobile.

Create an image-free blog list: rows separated by hairline rules, each row showing a left-aligned date in a fixed-width muted column, then the post title as a link at large text size, a one-line clamped description beneath it, and a right-aligned reading time. Group the rows under year headings when the list spans multiple years. Give each row a full-width hover background so the whole row reads as the hit target, and keep the vertical rhythm tight so twenty posts fit in two screens. Stack the date above the title on mobile. Use an ordered list with time elements for the dates.

Create a blog section with topic tabs above a six-card grid: tabs labelled All, Engineering, Design and Product with a post count beside each. Use real tab semantics — a tablist with arrow-key navigation, aria-selected, and managed focus — and reflect the active tab in the URL so a topic view is linkable. Switching a tab swaps the card set with a short fade rather than a layout jump, and keeps the grid height stable by always rendering a fixed number of card slots. Each card has a cover image, category pill, clamped title and excerpt, and a meta row with author and date. Announce the result count in an aria-live region.

Create a changelog-style blog section: a vertical timeline with a left rail of dots and connecting line, each entry showing a version tag, a date in a time element, a type pill for Added, Fixed or Changed, a title and a two-to-three sentence summary. Expand the most recent entry by default and render the rest as collapsed disclosure panels using button plus aria-expanded so keyboard users can open them. Add anchor links on each version so a specific release can be linked directly, and a Subscribe to updates link at the top of the section. Collapse the left rail to a simple stacked list on mobile.