Feature/card

[Rerbun]

closes #561

Tokens:

rhc.card-as-link.background-color = {rhc.color.wit}
rhc.card-as-link.border-color = {rhc.color.grijs.300}
rhc.card-as-link.border-radius = {rhc.border-radius.md}
rhc.card-as-link.border-width = {rhc.border-width.default}
rhc.card-as-link.color = {rhc.color.foreground.lint}
rhc.card-as-link.column-gap = {rhc.space.200}
rhc.card-as-link.inline-size = 328px
rhc.card-as-link.icon.color = {rhc.color.foreground.lint}
rhc.card-as-link.icon.size = {rhc.size.icon.functional}
rhc.card-as-link.link.color = {rhc.color.donkerblauw.500}
rhc.card-as-link.link.text-decoration = underline
rhc.card-as-link.link.active.text-decoration = none
rhc.card-as-link.link.hover.text-decoration = none
rhc.card-as-link.link.focus.text-decoration = none
rhc.card-as-link.metadata.color = {rhc.color.foreground.lint}
rhc.card-as-link.padding-block-end = {rhc.space.200}
rhc.card-as-link.padding-block-start = {rhc.space.200}
rhc.card-as-link.padding-inline-end = {rhc.space.200}
rhc.card-as-link.padding-inline-start = {rhc.space.200}
rhc.card-as-link.row-gap = {rhc.space.150}
rhc.card-as-link.active.background-color = {rhc.color.grijs.100}
rhc.card-as-link.active.text-decoration = underline
rhc.card-as-link.hover.background-color = {rhc.color.grijs.50}
rhc.card-as-link.hover.text-decoration = underline
rhc.card-as-link.focus.background-color = {rhc.color.lintblauw.50}
rhc.card-as-link.focus.text-decoration = underline
rhc.card-as-link.full-bleed.background-color = {rhc.color.zwart}
rhc.card-as-link.full-bleed.border-color = {rhc.color.none}
rhc.card-as-link.full-bleed.color = {rhc.color.foreground.onEmphasis}
rhc.card-as-link.full-bleed.opacity = 0.5
rhc.card-as-link.heading.padding-block-start = {rhc.space.100}
rhc.card-as-link.heading.font-size = {rhc.font-size.heading.level-4}
rhc.card-as-link.heading.font-weight = {rhc.font-weight.bold}
rhc.card-as-link.horizontal.background-color = {rhc.color.lintblauw.500}
rhc.card-as-link.horizontal.border-color = {rhc.color.none}
rhc.card-as-link.horizontal.color = {rhc.color.foreground.onEmphasis}
rhc.card-as-link.horizontal.max-block-size = {rhc.size.2-lint}
rhc.card-as-link.horizontal.padding-block-end = 0
rhc.card-as-link.horizontal.padding-block-start = 0
rhc.card-as-link.horizontal.padding-inline-end = {rhc.space.200}
rhc.card-as-link.horizontal.padding-inline-start = {rhc.space.200}
rhc.card-as-link.horizontal.heading.inline-size = 200px

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rijkshuisstijl-community	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 11:06am
rijkshuisstijl-community-templates	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 11:06am
rvs-rivm-nl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 11:06am

[Rozerinay]

Design review

Zou je bij de Default Card alle properties aan kunnen zetten (dus: description, metadata en link) zoals in Figma is uitgewerkt? De footer (waarin de Link zit) is nu bijv. ook leeg in de code.

---

De row gap lijkt niet aan te staan.

---

Bij hover kleurt de achtergrond niet mee.

---

De opacity van de full bleed variant is nog te licht. Deze overlay zit op de Image en onder de content.

---

Ik heb bij de full bleed variant in de HTML de Metadata voorzien van tekst en ik zie dat die een donkere kleur heeft, omdat het de token --rhc-card-as-link-metadata-color overneemt. Is het mogelijk om deze kleur alsnog de witte kleur mee te geven? Ik had hier de token todo.card-as-link.full-bleed.color voor aangemaakt.

---

De focus-style klopt nog niet.

---

De Image van de Horizontal variant is nu nog te groot. Ik heb in Figma de ratio 1:1 gebruikt (van 96px hoog).