WordCard component displays a word entry as an interactive card with category badge, title, meaning preview, and a “learn more” link. Used for related words sections and word listings.
Import
Usage
src/components/RelatedWordsSection.astro
With Custom Title Level
Props
The word entry from Astro’s content collection. Contains word data including:
slug- URL-safe identifierdata.word- The word itselfdata.meaning- Definition/meaningdata.category- Word category (sustantivo, verbo, etc.)
The current language code. Used for generating the correct URL path.Values:
"es" or "en"The HTML heading level to use for the word title. Use
"h3" for primary sections and "h4" for nested sections to maintain proper heading hierarchy.Word Data Structure
Theentry.data object should contain:
Structure
Features
Category Badge
Displays a colored badge in the top-right corner based on the word’s category:getCategoryColor() utility function.
Semantic Heading Levels
Choose the appropriate heading level based on your document structure:Text Truncation
The meaning text is limited to 2 lines using CSS line clamping:Hover Effects
Interactive hover states include:- Slight upward translation (
hover:-translate-y-1) - Border color changes to primary
- Background color changes to card-hover
- Shadow enhancement
Styling
Base Styles
Hover State
Internationalization
The “learn more” text is automatically translated:Accessibility
- Semantic HTML with proper heading hierarchy
- Full card is clickable (entire area is the link)
- Visible focus states
- Descriptive link text with icon
- Color contrast meets WCAG standards
Layout Examples
Grid Layout
Flex Layout
Category Colors
Category colors are defined in thegetCategoryColor() utility:
- sustantivo/noun: Blue
- verbo/verb: Green
- adjetivo/adjective: Orange
- adverbio/adverb: Purple
- expresion/expression: Pink
- interjección/interjection: Red
Related Components
- SearchBox - Search for words
- Ticker - Animated word carousel
- RelatedWordsSection - Groups of related words
Related Utilities
getCategoryColor()- Returns color for a given categoryuseTranslations()- Translation helper