Fixing the blue double underline that ran through a link card's title and description in post bodies turned into a redesign: a logo tile, an eyebrow chip, and a go button. You can try it yourself.
The dsui link card is a component whose whole face is one link. Placed in a post body, its title and description were drawn with a blue double underline. Removing the underline led to redrawing the card's shape and reactions to match the design system rules.
Post bodies have a rule that underlines links. The link card is one link (a) element, so it receives that rule. Telling the card itself to drop the underline is not enough, because the underline is painted across every piece of text inside the link. That is why the title and the description each seemed to get their own.
The fix is simple. The card and every element inside it now say no underline together. Inside a post body the card now keeps its card look.
| Logo | A pale circle | A round tile with a border |
| Eyebrow | Small text | A pill-shaped chip |
| Description | No length limit | Up to two lines |
| Destination | Not shown | The domain in small text |
| End mark | A single arrow | An up-right arrow in a round button |
A new optional meta prop takes a small line such as the domain. Without it the card is the same as before.
Pointing at the card lifts it 4px and adds a shadow. The round button at the end fills with the accent color, and its shadow follows that color. Pressing makes the card sink a little. If sound is on, a short effect plays too. On touch screens and with reduced motion, the card does not lift and only the color changes.
While building a component you only look at the component, but some problems show up only once it sits inside a post. A rule from outside that spills onto the text inside, like the link rule here, can happen to other components too. A new component is safer if it is checked inside a post body as well as on its demo screen.