LinkCard
View on GitHub: Copmonent表現力豊かで、遷移先の内容の一部を提示可能なリンク
Example#
Props#
Name | Type | Default | Description |
---|---|---|---|
className optional | string | - | CSSのクラス * @deprecated マージンなどをつけたい場合は<Box>や<Stack>を使ってください |
data-* optional | string | - | Custom data attributes |
description optional | string | - | 説明のテキスト |
href optional | string | - | 遷移先URL |
icon optional | ComponentType ReactElement 'ubie-iconsのアイコン名' | - | アイコン |
render optional | ReactElement | - | レンダリングされる要素を変更。フレームワークのリンクコンポーネントなどを指定 |
size | 'medium' 'small' | 'medium' | サイズ |
title required | string | - | 見出しのテキスト |
Feature#
- タイトル以外にも、アイコンや説明などの情報/表現を含んだリンクを提供します
- リンク先の情報を事前に提示できるため、ユーザーが内容を把握しやすくなります
- 複数のリンクカードが列挙されていた場合に、それぞれを差別化しやすい特徴があります
- エリアを大きくとるため、タップがしやすいメリットがあります
- コンポーネントの全体がリンクとして扱われます
- いわゆる「カード」の形をしています
Usage#
description
やicon
propには、遷移先のページと関連する情報を提示します- 無関係の内容を記載すると、遷移後にユーザーが混乱する可能性があります
description
(遷移先に関わるコンテンツ)は必須です。もしdescription
が必要ないのであれば、別のタップエリアが確保されたリストなどが適しているかも知れません- 広すぎるエリアへ
<LinkCard>
を配置してはいけません。長文のdescription
の場合は読みづらくなります
Accessibility#
Keyboard Interaction#
- Tab キーでフォーカスすることができます
- ネィティブの
<a>
と同様の操作が可能です- フォーカスを受け取り、Enterキーで押下できます
- Spaceキーでは操作できません