EditorialCard

Quick Preview

Composition

Use the public subpath import and compose only the slots you need. EditorialCard does not set a max-width; place it in a grid, flex row, or width-constrained wrapper in the consuming layout.

EditorialCard
├── EditorialCardHeader
│   ├── EditorialCardMeta
│   └── EditorialCardTitle
├── EditorialCardMedia
│   ├── EditorialCardCategory
│   └── EditorialCardPlayButton
├── EditorialCardRating
├── EditorialCardAttribution
├── EditorialCardExcerpt
└── EditorialCardLink

Usage

import {
  EditorialCard,
  EditorialCardHeader,
  EditorialCardMedia,
  EditorialCardMeta,
  EditorialCardTitle,
} from "@giddaa-housing/ui/editorial-card";

<EditorialCard>
  <EditorialCardHeader>
    <EditorialCardMeta>May 8, 2023</EditorialCardMeta>
    <EditorialCardTitle>Starting a Career in Web Design</EditorialCardTitle>
  </EditorialCardHeader>
  <EditorialCardMedia />
</EditorialCard>;

Examples

Default Editorial Card

Use this as the starting point for article or interview previews.

Media And Play Button

EditorialCardPlayButton is opt-in. Omit it for written articles and include it for playable media. When the video should open over the current page, pass the play button as the trigger for Video Player Dialog, as shown below. Keep navigation and analytics in the consuming app.

PreviewCode

May 8, 2023

Starting a Career in Web Design: Mauricio Tonon

Interview

ByWNgutor John

It's no secret: Awwwards Masterclasses believe that mentorship is essential and invaluable for creatives.

Read Article

May 8, 2023

Starting a Career in Web Design: Mauricio Tonon

Interview

ByWNgutor John

It's no secret: Awwwards Masterclasses believe that mentorship is essential and invaluable for creatives.

Read Article

Reviews

EditorialCardRating renders a star rating with an optional numeric score and review source, mirroring TestimonialBlockRating. It scales with the card's size.

Sizes

The size prop scales spacing, type, media height, avatar, and play button together without constraining width.

Props

Accessibility

• Keep EditorialCard semantic as an article unless the consuming context requires a different element via render.
• Provide meaningful alt text for informative images; use empty alt="" only for decorative thumbnails.
• EditorialCardRating exposes the star row as an image with a "{rating} out of 5" label, so the rating stays readable when showScore is false.
• EditorialCardPlayButton includes a default accessible name; override aria-label when multiple playable editorial cards need more specific labels.
• Use Video Player Dialog for modal playback rather than attaching ad-hoc overlay and media behavior to the card.
• Keep product routing and analytics in the consuming app. Use EditorialCardLink with a real href or render it as the app's link component.