6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven feature section layouts for landing pages: a three-up icon grid, alternating image and text rows, a heading with a checklist, a stats row, tabs that switch a preview, a without-and-with comparison and a big heading beside a compact feature grid.
The classic feature row: an icon, a short heading and one sentence for each feature, in a grid that drops from three columns to one by itself with repeat(auto-fit, minmax()). Each feature is a list item, because it is a list of features.
View code
<section class="fs1" aria-labelledby="fs1h"><h3 id="fs1h">Everything you need to sell online</h3><ul><li><span aria-hidden="true">⚡</span><b>Fast checkout</b><p>One page, wallet payments, no forced sign-up.</p></li><li><span aria-hidden="true">📦</span><b>Shipping rules</b><p>Rates by weight, zone or order total.</p></li><li><span aria-hidden="true">📈</span><b>Clear reports</b><p>Sales, margins and repeat buyers at a glance.</p></li></ul></section>
Feature rows where the picture swaps sides each time, the zig-zag layout of most product pages. Even rows reverse their order with grid-auto-flow: dense and an explicit column, and every row collapses to picture above text on narrow screens.
View code
<div class="fs2"><section><div class="pic" style="--g:linear-gradient(135deg,#bfdbfe,#3b82f6)" aria-hidden="true"></div><div class="tx"><h3>Plan together</h3><p>Shared boards keep everyone on the same page.</p></div></section><section><div class="pic" style="--g:linear-gradient(135deg,#fbcfe8,#db2777)" aria-hidden="true"></div><div class="tx"><h3>Ship on time</h3><p>Deadlines and reminders that actually help.</p></div></section></div>
A focused selling point: a heading, one sentence and a checklist of what is included, beside a call to action. The ticks are drawn with CSS on real list items, and the two halves sit side by side only when there is room.
View code
<section class="fs3"><div><h3>Launch in a weekend</h3><p>Our starter kit includes everything a new shop needs on day one.</p><a href="#kit">Get the kit</a></div><ul><li>Product, cart and checkout pages</li><li>Email templates for every order step</li><li>Shipping and tax set up</li><li>A 30-minute onboarding call</li></ul></section>
Three big numbers with short captions, a quick way to back up a claim. It is a description list, so each number is tied to what it measures, and the separators between items are borders that disappear when the row wraps.
A list of features on one side and a preview panel on the other; picking a feature swaps the preview. It follows the ARIA tabs pattern with arrow keys and roving tabindex, and the layout stacks on phones.
var tabs = document.querySelectorAll('.fs5 [role=tab]'), panel = document.getElementById('fs5p'), data = [['linear-gradient(135deg,#1d4ed8,#0e7490)', 'All customer messages in one place.'], ['linear-gradient(135deg,#7c3aed,#db2777)', 'Bookings and reminders, synced everywhere.'], ['linear-gradient(135deg,#047857,#65a30d)', 'Weekly numbers without a spreadsheet.']];
function sel(i) { tabs.forEach(function (t, j) { t.setAttribute('aria-selected', i === j); t.tabIndex = i === j ? 0 : -1; }); panel.setAttribute('aria-labelledby', tabs[i].id); panel.querySelector('.scr').style.setProperty('--g', data[i][0]); panel.querySelector('p').textContent = data[i][1]; tabs[i].focus(); }
tabs.forEach(function (t, i) { t.onclick = function () { sel(i); }; t.onkeydown = function (e) { if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); sel((i + (e.key === 'ArrowDown' ? 1 : tabs.length - 1)) % tabs.length); } }; });
06. Without Us and With Us
FeaturesComparison
Two columns contrasting the old way with the new way, a persuasive pattern for landing pages. The crosses and ticks are decorative; each list has a heading, so the meaning comes from the words Without and With rather than the icons.
View code
<div class="fs6"><section class="no"><h3>Without a system</h3><ul><li>Orders tracked in spreadsheets</li><li>Stock counts out of date</li><li>Late replies to customers</li></ul></section><section class="yes"><h3>With Stockroom</h3><ul><li>Orders synced automatically</li><li>Live stock across channels</li><li>Every message in one inbox</li></ul></section></div>
A large heading on the left and a two-by-two grid of small features on the right, a dense section that still breathes. Container queries switch it from stacked to side by side, so it adapts to the space it is placed in rather than the screen.
View code
<section class="fs7"><div class="in"><h3>Built for teams that move fast</h3><ul><li><b>Roles</b>Control who can edit what.</li><li><b>History</b>Undo any change in one click.</li><li><b>Comments</b>Discuss right on the work.</li><li><b>Exports</b>PDF, CSV and image.</li></ul></div></section>
Each feature needs a short heading and one sentence. If you need a paragraph, it deserves its own section. Lists of features are real lists, so screen readers announce how many there are.
Let the grid choose the columns
repeat(auto-fit, minmax(170px, 1fr)) fits as many columns as there is room for and wraps the rest, so the same CSS works from phones to wide screens without media queries.
Container queries for reusable sections
A section placed in a sidebar or a full-width band should adapt to its own width, not the screen's. container-type: inline-size on the section and @container rules make it portable.
Icons support, words explain
Decorative icons get aria-hidden. In comparisons, write Without and With in the headings rather than relying on red crosses and green ticks.
Frequently asked questions
How many features should a section show?
Three to six. More than that becomes a feature list; consider a table or a dedicated page.
Do the alternating rows need extra classes?
No. :nth-child(even) reorders every other row, and the stacked mobile layout is the default.
Can I use real screenshots?
Yes. Replace the gradient placeholders with images that have width, height and alt text.