dsui의 링크 카드는 카드 전체가 하나의 링크인 부품입니다. 글 본문에 넣었더니 제목과 설명에 파란 밑줄이 두 줄로 그려졌습니다. 밑줄을 지우다가 카드의 모양과 반응까지 디자인 시스템 규칙에 맞게 다시 그렸습니다.
글 본문에는 링크에 밑줄을 긋는 규칙이 있습니다. 링크 카드는 하나의 링크(a) 요소이므로 이 규칙을 그대로 받습니다. 카드 자신에게 밑줄을 없애라고 적어 두어도, 밑줄은 링크 안의 모든 글자에 겹쳐 그려집니다. 제목과 설명이 각자 밑줄을 얻은 것처럼 보인 이유입니다.
고친 방법은 단순합니다. 카드와 카드 안의 모든 요소에 밑줄 없음을 함께 적었습니다. 이제 글 본문 안에서도 카드는 카드 모양 그대로 나옵니다.
| 로고 | 연한 색 원 | 테두리가 있는 둥근 타일 |
| 말머리 | 작은 글자 | 알약 모양 칩 |
| 설명 | 길이 제한 없음 | 두 줄까지 |
| 가는 곳 | 보이지 않음 | 도메인을 작은 글자로 |
| 끝 표시 | 화살표 하나 | 둥근 버튼 안의 위쪽 오른쪽 화살표 |
새 선택 속성 meta가 도메인 같은 작은 줄을 받습니다. 속성을 주지 않으면 카드는 이전과 같습니다.
카드를 가리키면 4px 떠오르고 그림자가 생깁니다. 끝의 둥근 버튼은 강조색으로 채워지고, 그림자도 그 색을 따라갑니다. 누르면 카드가 살짝 가라앉습니다. 소리를 켜 두었다면 짧은 효과음도 납니다. 터치 화면과 움직임 줄이기 설정에서는 떠오르지 않고 색만 바뀝니다.
부품을 만들 때는 부품만 보게 되는데, 글 안에 넣어 보고서야 드러나는 문제가 있었습니다. 링크 규칙처럼 바깥 규칙이 안쪽 글자에 번지는 일은 다른 부품에서도 일어날 수 있습니다. 새 부품은 데모 화면뿐 아니라 글 본문 안에서도 한 번 확인하는 편이 안전합니다.