注目
比較Comparison Table
A plan-versus-feature matrix built as a real table, with readable boolean cells.
#comparison#table#pricing
6 個のフレームワーク初級
Loading…
Two captioned figures side by side, showing both states at once.
<!--
Two <figure>s, not a table and not two bullet lists: each card is a picture
with a caption about that picture, which is precisely what <figure> and
<figcaption> mean. The caption is tied to its image by the element itself, so
no aria-describedby wiring is needed and none can rot.
Unlike the wipe slider, both images are fully visible at once - use this when
the differences are spread across the frame and a moving edge would hide half
of whichever side you are not looking at.
-->
<section class="ba" aria-labelledby="ba-title">
<h2 class="ba__title" id="ba-title">Dashboard redesign</h2>
<div class="ba__grid">
<figure class="ba__card">
<span class="ba__tag ba__tag--before">Before</span>
<img class="ba__image" src="/images/dashboard-before.jpg" alt="The old dashboard: twelve stat tiles competing for attention" />
<figcaption class="ba__caption">
Twelve tiles, no hierarchy. Every metric shouted, so none of them landed.
</figcaption>
</figure>
<figure class="ba__card">
<span class="ba__tag ba__tag--after">After</span>
<img class="ba__image" src="/images/dashboard-after.jpg" alt="The new dashboard: one headline metric above a compact table" />
<figcaption class="ba__caption">
One headline metric, the rest demoted to a table. Task time fell by 40%.
</figcaption>
</figure>
</div>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | - | カードの見出しテキスト。 |
items必須 | BeforeAfterItem[] | - | レンダリングする項目の配列。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The trade-off against the wipe slider is visibility: a moving edge always hides half of whatever side you are not looking at, so use these cards when the differences are spread across the frame and both states need to be readable at the same time. Each card is a `<figure>` with a `<figcaption>` because that is literally what the elements mean - a picture and a caption about that picture - and the binding is structural, so there is no `aria-describedby` to wire up and none to rot. The "Before" / "After" pill is a real text node rather than `aria-hidden` decoration: the caption never repeats it, so hiding it would drop the one word that says which state you are looking at. The pill carries its own near-opaque plate and white text, which is why it clears 4.5:1 over any photograph and needs no dark-mode rule at all.