Feature List — Checkmark Included/Excluded Snippet

A feature list — a vertical list of capabilities with checkmarks — is one of the most-searched UI snippets because every pricing card, plan comparison table, product page, and feature showcase needs to show "what you get" in a way that is instantly scannable. This snippet is a clean, card-wrapped feature list that distinguishes included features (green checkmark) from excluded ones (muted X), so a single list can communicate exactly what a plan does and does not include. It is pure CSS, with the included/excluded state driven by one class per row.

Included vs excluded in one list

The key idea is that a feature list is more persuasive when it shows both what is included *and* what is not — it sets honest expectations and, on a pricing page, nudges users toward a higher tier to unlock the greyed-out items. Each <li class="feat"> carries either yes (included) or no (excluded). The yes rows get a green check in a soft green circle and full-strength text; the no rows get a muted X in a neutral circle and greyed-out text. So at a glance the reader sees a column of green checks (what they get) with the unavailable items clearly de-emphasized below — a far more informative pattern than a list of checks alone.

The icon chip pattern

Each feature's marker is a small circular chip (.mark) containing an SVG. The chip has a tinted background that matches the state — light green for included, light grey for excluded — and the icon inside inherits a matching stroke color. This "icon in a soft colored circle" treatment is what makes the list feel polished rather than like plain bullet points; the colored chip gives each row a clear visual anchor and reinforces the included/excluded distinction with both shape (check vs X) and color (green vs grey). The chips are flex-shrink: 0 so they never squash when a feature label wraps to two lines.

Why not rely on color alone

Color-blind users struggle with green-vs-red or green-vs-grey distinctions, so this list never uses color as the only signal. Included items use a checkmark and excluded items use an X — two clearly different shapes — and the excluded rows are also lower contrast (muted text). That means the included/excluded status is communicated three ways: icon shape, color, and text contrast. A reader who cannot distinguish the colors can still tell a check from an X and notice the dimmer rows, which is the accessible way to build any "yes/no" list.

Using a real list element

The features are a genuine <ul>/<li> list, not a stack of divs. This matters for accessibility: screen readers announce "list, 6 items" and let users navigate item by item, and the semantics correctly convey that these are a set of related features. The default list bullets and indentation are removed with list-style: none and reset margins (important because CSS frameworks like Tailwind reset lists too), and the layout is rebuilt with flexbox so each row aligns its chip and label cleanly. Keeping the list element means the component is both semantic and styled.

Designed to sit in a plan card

The list is wrapped in a rounded card with a plan title and subtitle, because feature lists almost always appear inside a pricing or plan card. The card gives the list context ("Pro plan — everything you need to scale") and a contained, elevated surface. You can drop just the <ul class="features"> into your own pricing card, or use the whole card as-is. The spacing and type sizes are tuned for a narrow pricing-column width, so multiple cards line up neatly side by side in a pricing grid.

Customizing the list

Re-theme by changing the included chip color (green here) and the icon stroke to your brand's "success" color, and adjust the muted grey for excluded rows. Add features by adding <li class="feat yes"> (or no) rows — the script-free design means any number of rows just work. To show a tooltip explaining a feature, wrap the label in a title attribute or a CSS tooltip. For a comparison table across plans, repeat the same yes/no rows per column. To highlight a key feature, add a "popular" badge or bold the label. Because each row's state is one class, generating the list from plan data is straightforward.

Accessibility checklist

Keep the <ul>/<li> structure so the set is announced as a list. The icons are decorative (the text label and the included/excluded distinction carry the meaning), so they need no alt text; if you want screen readers to announce "included/not included" explicitly, add visually-hidden text inside each chip (e.g. a span with "Included:" / "Not included:" that is off-screen). Maintain enough contrast on the muted excluded rows that the text is still readable (grey on white here stays legible). Because the component is plain semantic HTML and CSS, it works with keyboard navigation and assistive tech without any extra code.