src/components/ui/Card.astro
Card
Shared surface primitive for standard informational, linked, compact and muted cards.
A working page for the reusable pieces we already have. We can style components here first, then reuse them across the real site.
Search buttons, filters, listings, panels, cards, breadcrumbs and composed sections.
A cleaner map of what is atomic, what is a pattern, and what is club-specific.
Small primitives that should be safe to reuse almost anywhere.
src/components/ui/Card.astro
Shared surface primitive for standard informational, linked, compact and muted cards.
src/components/Button.astro
Shared action/link primitive built on daisyUI button classes.
src/components/Breadcrumbs.astro
Shared breadcrumb navigation used directly and through PageHeader.
src/components/ContentBadge.astro
Permanent content-category badge with a stable label-to-colour mapping.
src/components/SectionHeader.astro
Smaller module title row with optional tools on the right.
src/components/PagePanel.astro
Contained module wrapper for tables, filters, resources and forms.
Reusable pieces for searchable/listing pages.
src/components/ui/FilterBar.astro
Generic daisyUI search/filter pattern with page-specific labels and options.
src/components/ui/TabGroup.astro
Accessible daisyUI horizontal tabs with keyboard navigation and compact-screen scrolling.
src/components/ContactCard.astro
Contact-channel composition built on the shared Card surface.
src/components/ContactForm.astro
DaisyUI enquiry form that can compose a pre-filled email or submit to a configured endpoint.
src/components/ListingItem.astro
News listing variant with the shared small action button.
src/components/GalleryListingItem.astro
Gallery listing variant with a right-aligned 16:9 thumbnail and shared small action button.
src/components/GalleryCarousel.astro
Modal image carousel launched by the gallery listing variant.
src/components/NewsCard.astro
Homepage news card with shared media, metadata and action treatment.
src/components/HistoryArticleCard.astro
Image-led card for long-form club-history articles, with a dark text overlay and subtle hover zoom.
src/components/FixtureCard.astro
Specialised two-part match card that shares the card radius and surface tokens.
src/components/FullBleedCarousel.astro
News-card grid that becomes an edge-to-edge, touch-scroll carousel at 430px and below.
src/components/ResourceCard.astro
Linked document/resource row used on the child welfare page.
src/components/OfficerCard.astro
Profile card used for committee and board member grids.
src/components/TeamInfoCard.astro
Shared manager, training and pitch information card with confirmed and pending states.
src/components/TeamSwitcher.astro
Shared squad navigation control for every team page.
Bigger composition pieces that shape whole pages.
src/components/PageHeader.astro
Shared page title pattern with breadcrumbs, intro text and optional actions.
src/components/HeroSection.astro
Image-backed homepage hero composed from PageHeader with optional breadcrumbs and actions.
Reusable, but more specific to this club website.
src/components/match/MatchScoreboard.astro
Responsive match header containing competition, crests, score, status, date and venue.
src/components/match/MatchNavigation.astro
Match tabs combined with chronological Previous and Next navigation.
src/components/match/MatchTimeline.astro
Event timeline with scores, cards, substitutions, periods and an upcoming-match empty state.
src/components/match/MatchFormation.astro
Responsive full-pitch formation with team identities and event markers.
src/components/match/MatchLineups.astro
Two-team line-up tables with player event chips and responsive stacking.
src/components/match/MatchInformation.astro
Compact match metadata grid used by the Information tab.
src/components/CarouselNavigation.astro
Shared Previous and Next controls for chronological match carousels.
src/components/LeagueTableHeader.astro
Dynamic league-table section header matching the standard section-title pattern.
src/components/ImageCtaSection.astro
Reusable full-width image/gradient call-to-action section.
src/components/LogoCloud.astro
Reusable partner/association logo cloud.
Production components used by Fixtures & Results and Match Centre.
Responsive competition, teams, score, date and venue header.
Kerry District League Premier A
Sunday 13 September 2026, 2:00 pm
Woodlawn
Tabs control match views while Previous and Next move through the club schedule.
Home and away events, running score, period rows and substitutions.
Shown only when reliable positional data is available for both teams.
The fallback when formations are unavailable, and the detailed companion to the pitch.
Line-ups have not been published for this match.
A daisyUI tab group for switching between related views without leaving the page.
Use for a small set of closely related content views. The row scrolls horizontally on compact screens.
A quick summary of the team, its season and the latest club information.
Upcoming matches, kick-off times and venues appear in this view.
Recent scores and match outcomes appear in this view.
Current standings and competition progress appear in this view.
Players, coaches and team contacts appear in this view.
One shared header component with standard and hero sizing, plus optional breadcrumbs.
Used on listing and data pages.
Fixtures, results and league information for Killarney Athletic A.F.C.
Used on the homepage and UI kit with a title capped at 5rem.
Community football from Woodlawn, Killarney. News, teams, camps and club updates in one place.
The reusable image-backed hero with default and registration variants.
Text sizes and colour hierarchy using one consistent sample sentence.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
#101720#4B5563#002366#4169E1Official brand button system built on daisyUI’s btn class. Use links for navigation and real buttons for in-page actions.
The card patterns currently rendered on live pages.
The single shared surface contract. Default, linked and muted cards use the same border, radius, shadow, padding and interaction tokens.
Default
Use this for simple grouped content that does not need a custom visual structure.
Interactive
A linked card receives the standard focus, hover and elevation behaviour.
Muted
Use the muted variant for information that is incomplete or still to be confirmed.
Used in the Club History article archive to open a fully formatted historical story.
A card grid above 430px and a touch-scroll, full-bleed carousel on compact phones.
Our Summer Camp for boys and girls will take place at Killarney Athletic Grounds at Woodlawn.
Read updateRegistration is open for Academy, Youth and Senior teams for the coming season.
Read updateA representative third card demonstrates the compact-phone scrolling and card peek.
Read updateUsed for downloadable welfare and policy documents.
Upcoming matches use ‘vs’; completed matches replace it with the final score.
Football · Upcoming fixture
Sunday, 10 June · 3:00 pm
Killarney Athletic Park
Football · Full time
Sunday, 2 June · 12:00 pm
Killarney Athletic Park
The homepage match pattern keeps team and date first, the fixture central, and venue plus a quiet action last.
Senior A Men
Last matchFerndale
View matchUsed for confirmed committee members and board roles.
The production switcher and information-card variants proposed for every team page.
Manager / lead contact
Contact the club in the meantime
Training
To be confirmed
Schedule to follow
Home pitch / allocation
Breadcrumbs, filters, form controls and status treatments.
The permanent pastel palette for categories, types and active content filters. Each content label always resolves to the same tone.
Every tone pairs its soft background with the corresponding dark text colour.
#EBF3FA / #1C3D5A#EEF2FB / #1E2A5A#F0EEFA / #34235A#F4EEF8 / #422052#F7EDF5 / #4A1E45#F8ECF0 / #4D1B2D#FCEEEF / #5A1E24#FDF0EA / #5C2817#FDF3E7 / #5C3312#FAF4E8 / #4E3814#FAF6E6 / #4C3D12#F7F4EE / #3D3830#F0F2F5 / #2B333E#EAF5FA / #173F4E#E8F4F8 / #133E4ATwo deliberate variants, both using the same small primary button from the shared button system.
Text-led row for news and editorial updates.
Our Summer Camp for boys and girls will take place at Killarney Athletic Grounds at Woodlawn.
Text and action on the left, with a top-aligned 16:9 thumbnail on the right.

A working gallery row showing the shared action treatment, permanent badge and image crop.
DaisyUI-based contact components defined here first and reused together on the Contact Us page.
Contact channels sit with the location content on the real page.
Use a contact card for a clear contact channel and its supporting context.
sec@killarneyathletic.comThe shared structure for non-home pages before the individual content changes.
Use this panel wrapper for tables, filter blocks, PDF/resource lists, officer grids and other page modules that need to feel like one contained unit.
Killarney Athletic is part of a wider football community across Kerry, Munster and Ireland.