Feature/card

packages/components-css/card/_mixin.scss

@@ -0,0 +1,146 @@
+@mixin rhc-card {
+  @include rounded-border-corners;
+
+  box-sizing: border-box;
+  column-gap: var(--rhc-card-as-link-column-gap, 16px);
+  display: flex;
+  flex-direction: column;
+  inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  position: relative;
+  text-decoration: none;
+}
+
+@mixin rhc-card--default {
+  background-color: var(--rhc-card-as-link-background-color, white);
+  border-color: var(--rhc-card-as-link-border-color, #cbd5e1);
+  border-style: solid;
+  border-width: var(--rhc-card-as-link-border-width, 1px);
+  color: var(--rhc-card-as-link-color, #154273);
+}
+
+@mixin rhc-card--full-bleed {
+  color: var(--rhc-card-as-link-full-bleed-color, white);
+}
+
+@mixin rhc-card--active {
+  background-color: var(--rhc-card-as-link-active-background-color, #dce3ea);
+}
+
+@mixin rhc-card--focus {
+  background-color: var(--rhc-card-as-link-focus-background-color, #dce3ea);
+}
+
+@mixin rhc-card--full-bleed__footer {
+  padding-block-end: var(--rhc-card-as-link-full-bleed-padding-block-end, 16px);
+  padding-block-start: var(--rhc-card-as-link-full-bleed-padding-block-start, 16px);
+  padding-inline-end: var(--rhc-card-as-link-full-bleed-padding-inline-end, 0);
+  padding-inline-start: var(--rhc-card-as-link-full-bleed-padding-inline-start, 0);
+}
+
+@mixin rhc-card__image {
+  aspect-ratio: 16 / 9;
+  block-size: 100%;
+}
+
+@mixin rhc-card__content {
+  padding-block-end: var(--rhc-card-as-link-padding-block-end, 16px);
+  padding-block-start: var(--rhc-card-as-link-padding-block-start, 16px);
+  padding-inline-end: var(--rhc-card-as-link-padding-inline-end, 16px);
+  padding-inline-start: var(--rhc-card-as-link-padding-inline-start, 16px);
+  row-gap: var(--rhc-card-as-link-row-gap, 12px);
+}
+
+@mixin rhc-card--horizontal__content {
+  @include rounded-border-corners;
+
+  background-color: var(--rhc-card-as-link-horizontal-background-color, #154273);
+  color: var(--rhc-card-as-link-horizontal-color, white);
+  column-gap: var(--rhc-card-as-link-column-gap, 16px);
+  display: flex;
+  flex-direction: row;
+  padding-block-end: var(--rhc-card-as-link-horizontal-padding-block-end, 0);
+  padding-block-start: var(--rhc-card-as-link-horizontal-padding-block-start, 0);
+  padding-inline-end: var(--rhc-card-as-link-horizontal-padding-inline-end, 0);
+  padding-inline-start: var(--rhc-card-as-link-horizontal-padding-inline-start, 0);
+  row-gap: var(--rhc-card-as-link-row-gap, 12px);
+}
+
+@mixin rhc-card--full-bleed__image-container {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+@mixin rhc-card--full-bleed__image {
+  @include rounded-border-corners;
+
+  block-size: unset;
+  inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  position: absolute;
+  z-index: -1;
+}
+
+@mixin rhc-card--horizontal__image {
+  @include rounded-border-corners;
+}
+
+@mixin rhc-card__heading {
+  align-items: center;
+  display: flex;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+@mixin rhc-card__heading--active {
+  text-decoration: var(--rhc-card-as-link-active-text-decoration, underline);
+}
+
+@mixin rhc-card__heading--hover {
+  text-decoration: var(--rhc-card-as-link-hover-text-decoration, underline);
+}
+
+@mixin rhc-card__heading--focus {
+  text-decoration: var(--rhc-card-as-link-focus-text-decoration, underline);
+}
+
+@mixin rhc-card__icon {
+  color: var(--rhc-card-as-link-icon-color, #154273);
+  size: var(--rhc-card-as-link-icon-size, 24px);
+}
+
+@mixin rhc-card__link {
+  color: var(--rhc-card-as-link-link-color, #01689b);
+  text-decoration: var(--rhc-card-as-link-link-text-decoration, underline);
+}
+
+@mixin rhc-card__link--active {
+  --utrecht-link-color: var(--rhc-card-as-link-link-active-color, #42145f);
+
+  color: var(--rhc-card-as-link-link-active-color, #42145f);
+  text-decoration: var(--rhc-card-as-link-link-active-text-decoration, none);
+}
+
+@mixin rhc-card__link--hover {
+  text-decoration: var(--rhc-card-as-link-link-hover-text-decoration, none);
+}
+
+@mixin rhc-card__link--focus {
+  text-decoration: var(--rhc-card-as-link-link-focus-text-decoration, none);
+}
+
+@mixin rhc-card__metadata {
+  color: var(--rhc-card-as-link-metadata-color, #154273);
+}
+
+@mixin rounded-border-corners {
+  border-end-end-radius: var(--rhc-card-as-link-border-end-end-radius, var(--rhc-card-as-link-border-radius, 5px));
+  border-end-start-radius: var(--rhc-card-as-link-border-end-start-radius, var(--rhc-card-as-link-border-radius, 5px));
+  border-start-end-radius: var(--rhc-card-as-link-border-start-end-radius, var(--rhc-card-as-link-border-radius, 5px));
+  border-start-start-radius: var(
+    --rhc-card-as-link-border-start-start-radius,
+    var(--rhc-card-as-link-border-radius, 5px)
+  );
+}
+
+@mixin rhc-card__empty-element {
+  display: none;
+}

packages/components-css/card/index.scss

@@ -0,0 +1,92 @@
+@import "./mixin";
+
+.rhc-card {
+  @include rhc-card;
+}
+
+.rhc-card div:empty {
+  @include rhc-card__empty-element;
+}
+
+.rhc-card--default {
+  @include rhc-card--default;
+}
+
+.rhc-card--full-bleed {
+  @include rhc-card--full-bleed;
+}
+
+.rhc-card__footer {
+  @include rhc-card__content;
+}
+.rhc-card__image {
+  @include rhc-card__image;
+}
+
+.rhc-card__heading {
+  @include rhc-card__heading;
+}
+
+.rhc-card__icon {
+  @include rhc-card__icon;
+}
+
+.rhc-card__metadata {
+  @include rhc-card__metadata;
+}
+
+.rhc-card__content {
+  @include rhc-card__content;
+}
+
+.rhc-card--horizontal .rhc-card__content {
+  @include rhc-card--horizontal__content;
+}
+
+.rhc-card--horizontal .rhc-card__image {
+  @include rhc-card--horizontal__image;
+}
+
+.rhc-card--full-bleed .rhc-card__footer {
+  @include rhc-card--full-bleed__footer;
+}
+
+.rhc-card--full-bleed .rhc-card__image {
+  @include rhc-card--full-bleed__image;
+}
+
+.rhc-card__link {
+  @include rhc-card__link;
+}
+
+.rhc-card:active {
+  @include rhc-card--active;
+}
+
+.rhc-card:active .rhc-card__heading {
+  @include rhc-card__heading--active;
+}
+
+.rhc-card:active .rhc-card__link {
+  @include rhc-card__link--active;
+}
+
+.rhc-card:focus {
+  @include rhc-card--focus;
+}
+
+.rhc-card:focus .rhc-card__heading {
+  @include rhc-card__heading--active;
+}
+
+.rhc-card:focus .rhc-card__link {
+  @include rhc-card__link--focus;
+}
+
+.rhc-card:hover .rhc-card__heading {
+  @include rhc-card__heading--active;
+}
+
+.rhc-card:hover .rhc-card__link {
+  @include rhc-card__link--hover;
+}

packages/components-css/index.scss

@@ -10,6 +10,7 @@
 @import "blockquote/index";
 @import "breadcrumb-nav/index";
 @import "button/index";
+@import "card/index";
 @import "checkbox/index";
 @import "fieldset/index";
 @import "figure/index";

packages/components-react/src/Card.tsx

@@ -0,0 +1,84 @@
+import clsx from 'clsx';
+import { AnchorHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react';
+import { Image } from './Image';
+import { Link } from './Link';
+
+interface CardPropsBase extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  title: string;
+  className?: string;
+  heading: ReactNode;
+}
+
+interface DefaultCard extends CardPropsBase {
+  appearance: 'default';
+  button?: ReactNode;
+  icon?: ReactNode;
+  imageSrc?: string;
+  description?: ReactNode;
+  metadata?: ReactNode;
+  linkLabel?: string;
+}
+
+interface BackgroundImageCard extends CardPropsBase {
+  appearance: 'full-bleed';
+  imageSrc: string;
+  description?: ReactNode;
+  metadata?: ReactNode;
+}
+
+interface HorizontalImageCard extends CardPropsBase {
+  appearance: 'horizontal';
+  imageSrc: string;
+  imageAlt: string;
+}
+
+export type CardProps = DefaultCard | BackgroundImageCard | HorizontalImageCard;
+
+export const Card = forwardRef(
+  (
+    { heading, appearance, className, imageSrc, href, title, children, ...restProps }: PropsWithChildren<CardProps>,
+    ref: ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    return (
+      <a
+        href={href}
+        ref={ref}
+        title={title}
+        className={clsx(
+          'rhc-card',
+          {
+            'rhc-card--default': appearance === 'default',
+            'rhc-card--full-bleed': appearance === 'full-bleed',
+            'rhc-card--horizontal': appearance === 'horizontal',
+          },
+          className,
+        )}
+      >
+        {appearance === 'full-bleed' && imageSrc && <Image className="rhc-card__image" src={imageSrc} />}
+        <div className="rhc-card__content">
+          <div className="rhc-card__image-container">
+            {appearance !== 'full-bleed' && imageSrc && <Image className="rhc-card__image" src={imageSrc} />}
+          </div>
+          <div className="rhc-card__icon">{(restProps as DefaultCard).icon}</div>
+          <div className="rhc-card__heading">{heading}</div>
+          <div className="rhc-card__description">{(restProps as DefaultCard | BackgroundImageCard).description}</div>
+          <div className="rhc-card__metadata">{(restProps as DefaultCard | BackgroundImageCard).metadata}</div>
+          {children}
+        </div>
+        <div className="rhc-card__footer">
+          {(restProps as DefaultCard).linkLabel && (
+            <div className="rhc-card__link">
+              <Link>{(restProps as DefaultCard).linkLabel}</Link>
+            </div>
+          )}
+          {(restProps as DefaultCard).button && (
+            <div className="rhc-card__button">{(restProps as DefaultCard).button}</div>
+          )}
+        </div>
+      </a>
+    );
+  },
+);
+
+Card.displayName = 'Card';

packages/components-react/src/index.ts

@@ -34,6 +34,7 @@ export {
   SecondaryActionButton,
   SubtleButton,
 } from './Button';
+export { Card, type CardProps } from './Card';
 export { Checkbox, type CheckboxProps } from './Checkbox';
 export { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup';
 export { Fieldset, type FieldsetProps } from './Fieldset';