精选
对比Comparison Table
A plan-versus-feature matrix built as a real table, with readable boolean cells.
#comparison#table#pricing
6 个框架初级
Loading…
Two independent lists side by side - the versus layout that is deliberately not a table.
<!--
Deliberately NOT a table. The two columns do not share a row axis: "Version
history is a filename" has no counterpart in the right-hand list, and pairing
them into <tr>s would invent a relationship that is not there. Two independent
<section>s with their own <h3> and <ul> say exactly what is true - two lists,
side by side.
Each column's heading is its own landmark label, so a screen reader user can
read one side end-to-end instead of zig-zagging across a fake matrix.
-->
<section class="versus" aria-labelledby="versus-title">
<p class="versus__kicker">Why teams switch</p>
<h2 class="versus__title" id="versus-title">Spreadsheets vs. a real system</h2>
<div class="versus__grid">
<section class="versus__col versus__col--negative" aria-labelledby="versus-before">
<h3 class="versus__heading" id="versus-before">Spreadsheets</h3>
<ul class="versus__list">
<li class="versus__item">
<span class="versus__mark versus__mark--no" aria-hidden="true">✗</span>
<span class="versus__sr">Not included:</span>
Version history is a filename
</li>
<li class="versus__item">
<span class="versus__mark versus__mark--no" aria-hidden="true">✗</span>
<span class="versus__sr">Not included:</span>
Permissions end at "share the link"
</li>
<li class="versus__item">
<span class="versus__mark versus__mark--no" aria-hidden="true">✗</span>
<span class="versus__sr">Not included:</span>
Every report is rebuilt by hand
</li>
</ul>
</section>
<section class="versus__col versus__col--positive" aria-labelledby="versus-after">
<h3 class="versus__heading" id="versus-after">ADYSRE</h3>
<ul class="versus__list">
<li class="versus__item">
<span class="versus__mark versus__mark--yes" aria-hidden="true">✓</span>
<span class="versus__sr">Included:</span>
A full audit trail on every record
</li>
<li class="versus__item">
<span class="versus__mark versus__mark--yes" aria-hidden="true">✓</span>
<span class="versus__sr">Included:</span>
Role-based access down to the field
</li>
<li class="versus__item">
<span class="versus__mark versus__mark--yes" aria-hidden="true">✓</span>
<span class="versus__sr">Included:</span>
Reports that refresh themselves
</li>
</ul>
</section>
</div>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
kicker | string | - | 显示在标题上方的小标签。 |
title必填 | string | - | 卡片的标题文本。 |
items必填 | ComparisonColumn[] | - | 要渲染的项目数组。 |
className | string | - | 合并到根元素上的额外类名。 |
This is the entry to reach for when the two sides do not share a row axis. "Version history is a filename" has no counterpart in the right-hand list, and pairing the two into `<tr>`s would invent a relationship that is not there - so each side is its own `<section>` with its own `<h3>` and `<ul>`, and a screen-reader user reads one side end to end instead of zig-zagging across a fake matrix. The `tone` field drives the glyph, the accent rule and the visually-hidden "Included:" / "Not included:" prefix together, so the three can never drift apart. The accent is a 3px top rule rather than a background fill on purpose: tint the whole column and both lists' body copy has to be re-checked for contrast against a second surface. It collapses to one column below 40rem, and unlike a comparison table it still reads correctly stacked.