Skip to content

Componentize image card #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ashimupd wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Componentize image card #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
534fbba
componentize image card
Nov 6, 2025
ca5eb90
refactor
Nov 6, 2025
b1bcf47
Merge branch 'main' of https://github.com/accessiblecommunity/accessi…
ashimupd Jan 8, 2026
60a29cf
feedback from PR review
ashimupd Jan 8, 2026
53fcecf
try to fix build error
ashimupd Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions astro/src/components/ImageCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";

interface Props {
image: ImageMetadata;
alt?: string | null;
title: string;
theme: string;
href: string;
buttonText: string;
borderClass?: string;
Copy link
Contributor

@courtneylinder courtneylinder Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are your thoughts of instead of having all the individual classes for border, title, col, we create variants of this ImageCard? I would maybe need to check the visuals so we could see what to call them/how to group them but in a Design System there is a balance for sure of allowing anything to go and having some constraints by saying like hey we have these 2-3 variants, please use one of those

Copy link
Contributor Author

@ashimupd ashimupd Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah, I've seen that approach in systems like MUI, where a predefined set of styles is applied to the component based on use cases that the D/S has already identified, but unsure if we have done that exercise yet -- I'll resolve this now and create a new issue to track this suggestion to discuss / implement next.

titleClass?: string;
colClass?: string;
}

const {
image,
alt,
title,
theme,
href,
buttonText,
Copy link
Contributor

@courtneylinder courtneylinder Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thoughts @brian-montgomery on button vs link text? We are making an anchor tag but we use btn bootstrap styling classes

Copy link
Contributor

@brian-montgomery brian-montgomery Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have a strong opinion. It looks like a button with the styling, but there's not a form or anything, so it more functions more like a link.

Copy link
Contributor Author

@ashimupd ashimupd Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it takes the user to another route, I thought of keeping it as an anchor semantically -- please let me know if we need to discuss further -- I'll resolve this comment for now

colClass = "col"
} = Astro.props;

const {
borderClass = `border-${theme}-subtle`,
titleClass = `text-${theme}`,
} = Astro.props;
---

<div class={colClass}>
<div class={`card border ${borderClass}`}>
<Image
src={image}
class="card-img-top"
alt={alt || null}
/>
<div class="card-body">
<h3 class={`card-title ${titleClass}`} set:text={title} />
<slot />
<a
href={href}
class={`btn btn-${theme}`}
set:text={buttonText}
/>
</div>
</div>
</div>

<style>
.card-img-top {
height: auto;
}
</style>

1 change: 1 addition & 0 deletions astro/src/content.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ const escapeRoomThemes = defineCollection({
tagline: z.string(),
image: image(),
alt: z.string().optional(),
buttonText: z.string().optional().default("Learn more"),
page: z.object({
image: image(),
theme: z.string().default("dark"),
Expand Down
9 changes: 5 additions & 4 deletions astro/src/content/escape-room-themes/corporate.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: A Corporate Conundrum
tagline: A ground-breaking technology your company has developed is missing. You've received a tip on how to retrieve it.
image: /src/images/escape-room/aleksandar-andreev-k2gRTJM9BPw-unsplash.jpg
alt: A gentleman wearing dark clothes holding a briefcase
buttonText: Learn more
page:
image: /src/images/escape-room/aleksandar-andreev-k2gRTJM9BPw-unsplash.jpg
theme: corporate
Expand All @@ -16,7 +17,7 @@ This escape room kit includes puzzles that involve translating braille, number a

### Disabilities Supported

* Blind participants are supported through Braille and SeeingAI.
* Captions are provided for audio content.
* We provide a descriptive transcript to be printed in braille for deaf-blind participants
* Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution. Dragon or other speech input software can be installed on a laptop to give access to one puzzle.
- Blind participants are supported through Braille and SeeingAI.
- Captions are provided for audio content.
- We provide a descriptive transcript to be printed in braille for deaf-blind participants
- Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution. Dragon or other speech input software can be installed on a laptop to give access to one puzzle.
3 changes: 2 additions & 1 deletion astro/src/content/escape-room-themes/kitchen.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: A Baking Bonanza
tagline: You are looking for classic recipes to submit to the local fair. Will you find them in time to win the blue ribbon?
image: /src/images/escape-room/priscilla-du-preez-SU5jSHu1pK8-unsplash.jpg
alt: A freshly baked pie, next to a jar of flour and a rolling pin
buttonText: Learn more
page:
image: /src/images/escape-room/priscilla-du-preez-SU5jSHu1pK8-unsplash.jpg
theme: kitchen
Expand All @@ -19,4 +20,4 @@ This escape room kit includes puzzles that involve manipulating objects, number
- Blind participants are supported through Braille and SeeingAI
- Captions are provided for audio content
- We provide a descriptive transcript to be printed in braille for deaf-blind participants
- Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution
- Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution
29 changes: 12 additions & 17 deletions astro/src/pages/services/escape-room/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
import ThemedSection from "@components/ThemedSection.astro";
import ImageCard from "@components/ImageCard.astro";
import { YouTube } from 'astro-lazy-youtube-embed'

import brailleBlocks from "src/images/escape-room/braille-blocks.png";
Expand Down Expand Up @@ -125,23 +126,17 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
<div class="row row-cols-2 g-3 align-items-stretch">
{
rooms.map(room => (
<div class="col">
<div class="card border border-dark">
<Image
src={room.data.image}
class="card-img-top"
alt={room.data.alt || null}
/>
<div class="card-body">
<h3 class={`card-title text-truncate text-${room.data.page.theme}`} set:text={room.data.title} />
<p class="card-text" set:text={room.data.tagline} />
<a
href={`/services/escape-room/themes/${room.id}`}
class={`btn btn-${room.data.page.theme}`}
>Learn more</a>
</div>
</div>
</div>
<ImageCard
image={room.data.image}
alt={room.data.alt}
title={room.data.title}
theme={room.data.page.theme}
href={`/services/escape-room/themes/${room.id}`}
buttonText={room.data.buttonText || "Learn more"}
titleClass={`text-truncate text-${room.data.page.theme}`}
>
<p class="card-text" set:text={room.data.tagline} />
</ImageCard>
))
}
</div>
Expand Down
37 changes: 16 additions & 21 deletions astro/src/pages/services/escape-room/themes/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
---
import { getOpenGraphImageData } from "@lib/og-image";
import type { Breadcrumbs, PageMetadata } from "@lib/types";
import { getCollection, type CollectionEntry } from "astro:content";
Expand All @@ -18,14 +17,16 @@ const crumbs: Breadcrumbs = [
];

import Hero from "@components/HeroWithBreadcrumbs.astro";
import { Image } from "astro:assets";
import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
import ThemedSection from "@components/ThemedSection.astro";
import ImageCard from "@components/ImageCard.astro";

import heroBg from "src/images/escape-room/jonathan-kemper-9tamF4J0vLk-unsplash.jpg";

const rooms: Array<CollectionEntry<"escapeRoomThemes">> =
sortBy(await getCollection("escapeRoomThemes"), (room) => room.data.title);
const rooms = sortBy(
await getCollection("escapeRoomThemes"),
(room) => room.data.title
);

---

Expand All @@ -43,23 +44,17 @@ const rooms: Array<CollectionEntry<"escapeRoomThemes">> =
>
{
rooms.map(room => (
<div class="col">
<div class={`card border border-${room.data.page.theme}-subtle`}>
<Image
src={room.data.image}
class="card-img-top"
alt={room.data.alt || null}
/>
<div class="card-body">
<h3 class={`text-${room.data.page.theme}-emphasis`} set:text={room.data.title} />
<p class="card-text" set:text={room.data.tagline} />
<a
href={`/services/escape-room/themes/${room.id}`}
class={`btn btn-${room.data.page.theme}`}
>Learn more</a>
</div>
</div>
</div>
<ImageCard
image={room.data.image}
alt={room.data.alt}
title={room.data.title}
theme={room.data.page.theme}
href={`/services/escape-room/themes/${room.id}`}
buttonText={room.data.buttonText || "Learn more"}
titleClass={`text-${room.data.page.theme}-emphasis`}
>
<p class="card-text" set:text={room.data.tagline} />
</ImageCard>
))
}
</div>
Expand Down
Loading