Comparison Section With Features Matrix
ProDark comparison section with a four column features matrix, Google Microsoft and Amazon wordmarks, and circular missing marks. Winning values read brighter than the rest.
When to use Comparison Section With Features Matrix
Use this when three named products have to share one table. The first cell holds Compare plans. Google, Microsoft, and Amazon sit as wordmarks. Each row names a limit on the left and prints a value in each product column. The stronger value is set in brighter type. A circular X marks a product that does not include the row.
Do not use this to sell three of your own plans. That is a pricing section. Replace the demo wordmarks, prices, and limits before production. Keep the hairline grid and the square outer frame. A table of only checkmarks is a different block.
Block details
- Category
- Comparison Sections
- Renders
- CSS only. Paints as soon as the stylesheet arrives
- Theme
- Fixed dark surface. No light variant
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxtailwind-merge- Source
- 339 lines, 20 KB in one file
- Install
wensity add comparison-section-with-features-matrix --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- dark, comparison, matrix, toggle, saas
- Last updated
