src/components/ui/Card.astro
Card
Shared surface primitive for standard informational, linked, compact and muted cards.
UI Kit
A working page for the reusable pieces we already have. We can style components here first, then reuse them across the real site.
Find a component
Search buttons, filters, listings, panels, cards, breadcrumbs and composed sections.
Component inventory
A cleaner map of what is atomic, what is a pattern, and what is club-specific.
Atomic components
Small primitives that should be safe to reuse almost anywhere.
src/components/Button.astro
Button
Shared action/link primitive built on daisyUI button classes.
src/components/Breadcrumbs.astro
Breadcrumbs
Shared breadcrumb navigation used directly and through PageHeader.
src/components/ContentBadge.astro
ContentBadge
Permanent content-category badge with a stable label-to-colour mapping.
src/components/SectionHeader.astro
SectionHeader
Smaller module title row with optional tools on the right.
src/components/PagePanel.astro
PagePanel
Contained module wrapper for tables, filters, resources and forms.
Controls and listing patterns
Reusable pieces for searchable/listing pages.
src/components/ui/FilterBar.astro
FilterBar
Generic daisyUI search/filter pattern with page-specific labels and options.
src/components/ui/TabGroup.astro
TabGroup
Accessible daisyUI horizontal tabs with keyboard navigation and compact-screen scrolling.
src/components/ContactCard.astro
ContactCard
Contact-channel composition built on the shared Card surface.
src/components/ContactForm.astro
ContactForm
DaisyUI enquiry form that can compose a pre-filled email or submit to a configured endpoint.
src/components/ListingItem.astro
ListingItem
News listing variant with the shared small action button.
src/components/GalleryListingItem.astro
GalleryListingItem
Gallery listing variant with a right-aligned 16:9 thumbnail and shared small action button.
src/components/GalleryCarousel.astro
GalleryCarousel
Modal image carousel launched by the gallery listing variant.
src/components/NewsCard.astro
NewsCard
Homepage news card with shared media, metadata and action treatment.
src/components/HistoryArticleCard.astro
HistoryArticleCard
Image-led card for long-form club-history articles, with a dark text overlay and subtle hover zoom.
src/components/FixtureCard.astro
FixtureCard
Specialised two-part match card that shares the card radius and surface tokens.
src/components/FullBleedCarousel.astro
FullBleedCarousel
News-card grid that becomes an edge-to-edge, touch-scroll carousel at 430px and below.
src/components/ResourceCard.astro
ResourceCard
Linked document/resource row used on the child welfare page.
src/components/OfficerCard.astro
OfficerCard
Profile card used for committee and board member grids.
src/components/TeamInfoCard.astro
TeamInfoCard
Shared manager, training and pitch information card with confirmed and pending states.
src/components/TeamSwitcher.astro
TeamSwitcher
Shared squad navigation control for every team page.
Page patterns
Bigger composition pieces that shape whole pages.
src/components/PageHeader.astro
PageHeader
Shared page title pattern with breadcrumbs, intro text and optional actions.
src/components/HeroSection.astro
HeroSection
Image-backed homepage hero composed from PageHeader with optional breadcrumbs and actions.
Composed / domain sections
Reusable, but more specific to this club website.
src/components/match/MatchScoreboard.astro
MatchScoreboard
Responsive match header containing competition, crests, score, status, date and venue.
src/components/match/MatchNavigation.astro
MatchNavigation
Match tabs combined with chronological Previous and Next navigation.
src/components/match/MatchTimeline.astro
MatchTimeline
Event timeline with scores, cards, substitutions, periods and an upcoming-match empty state.
src/components/match/MatchFormation.astro
MatchFormation
Responsive full-pitch formation with team identities and event markers.
src/components/match/MatchLineups.astro
MatchLineups
Two-team line-up tables with player event chips and responsive stacking.
src/components/match/MatchInformation.astro
MatchInformation
Compact match metadata grid used by the Information tab.
src/components/CarouselNavigation.astro
CarouselNavigation
Shared Previous and Next controls for chronological match carousels.
src/components/LeagueTableHeader.astro
LeagueTableHeader
Dynamic league-table section header matching the standard section-title pattern.
src/components/ImageCtaSection.astro
ImageCtaSection
Reusable full-width image/gradient call-to-action section.
src/components/LogoCloud.astro
LogoCloud
Reusable partner/association logo cloud.
Match and fixtures system
Production components used by Fixtures & Results and Match Centre.
Match scoreboard
Responsive competition, teams, score, date and venue header.
Kerry District League Premier A
Killarney Athletic A.F.C.
5 – 2Full time
Listowel Celtic
Sunday 13 September 2026, 2:00 pm
Woodlawn
Match tabs and chronology
Tabs control match views while Previous and Next move through the club schedule.
Event timeline
Home and away events, running score, period rows and substitutions.
- J. Cooper1 – 0
- HT1 – 0
- D. FeehanD. McCarthy
Formation pitch
Shown only when reliable positional data is available for both teams.
4-3-34-4-21J. Cooper
4D. Murphy (C)
9T. Sparling
Line-up tables
The fallback when formations are unavailable, and the detailed companion to the pitch.
Killarney Athletic A.F.C.
- 1C. MitchellGK
- 8B. O'SheaCM
- 11J. BowlerCF
Opposition A
- 1C. MitchellGK
- 8B. O'SheaCM
- 11J. BowlerCF
Line-ups have not been published for this match.
Match information
- Competition
- Kerry District League Premier A
- Date and time
- Sunday, 20 September, 1:00 pm
- Venue
- Woodlawn
- Team
- Senior A
Carousel and league-table headers
Kerry District League Premier A table
Horizontal tabs
A daisyUI tab group for switching between related views without leaving the page.
Team information tabs
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.
Headers
One shared header component with standard and hero sizing, plus optional breadcrumbs.
Standard page header
Used on listing and data pages.
Fixtures & Results
Fixtures, results and league information for Killarney Athletic A.F.C.
Hero page header
Used on the homepage and UI kit with a title capped at 5rem.
Killarney Athletic A.F.C.
Community football from Woodlawn, Killarney. News, teams, camps and club updates in one place.
Hero section
The reusable image-backed hero with default and registration variants.
Atoms: typography and colour
Text sizes and colour hierarchy using one consistent sample sentence.
Text scale
Sample: The quick brown fox
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
Primary text
#101720Secondary text
#4B5563Dark navy
#002366Royal blue
#4169E1Atoms: buttons
Official brand button system built on daisyUI’s btn class. Use links for navigation and real buttons for in-page actions.
Content cards
The card patterns currently rendered on live pages.
Base card family
The single shared surface contract. Default, linked and muted cards use the same border, radius, shadow, padding and interaction tokens.
Default
Contained information
Use this for simple grouped content that does not need a custom visual structure.
Interactive
Linked destination
A linked card receives the standard focus, hover and elevation behaviour.
Muted
Pending information
Use the muted variant for information that is incomplete or still to be confirmed.
History article card
Used in the Club History article archive to open a fully formatted historical story.
Full-bleed carousel
A card grid above 430px and a touch-scroll, full-bleed carousel on compact phones.
Summer Camp (Boys & Girls) 2026
Our Summer Camp for boys and girls will take place at Killarney Athletic Grounds at Woodlawn.
Read updateRegistration now open
Registration is open for Academy, Youth and Senior teams for the coming season.
Read update
Latest club update
A representative third card demonstrates the compact-phone scrolling and card peek.
Read updateResource card
Used for downloadable welfare and policy documents.
Fixture cards
Upcoming matches use ‘vs’; completed matches replace it with the final score.
KillarneyAthletic A.F.C.
vsTralee Dynamos
Football · Upcoming fixture
KDL Premier A
Sunday, 10 June · 3:00 pm
Killarney Athletic Park
KillarneyAthletic A.F.C.
3 – 1St. Brendan’sPark FC
Football · Full time
KDL Premier A
Sunday, 2 June · 12:00 pm
Killarney Athletic Park
Compact fixture row
The homepage match pattern keeps team and date first, the fixture central, and venue plus a quiet action last.
Senior A Men
Last matchSun, 20 Sept1:00 pm
Killarney Athletic A.F.C.
3 – 2
Killarney Celtic FC
3 – 2Killarney Celtic FCFerndale
View matchClub officer card
Used for confirmed committee members and board roles.
Team page components
The production switcher and information-card variants proposed for every team page.
Manager / lead contact
To be confirmed
Contact the club in the meantime
Training
To be confirmed
To be confirmed
Schedule to follow
Home pitch / allocation
Killarney Athletic Park, Woodlawn
Controls and small UI
Breadcrumbs, filters, form controls and status treatments.
Breadcrumbs
News filter bar
Same component, different page prompt
Form controls
Badges and filters
NewsClub notesIrish football
Content badges
The permanent pastel palette for categories, types and active content filters. Each content label always resolves to the same tone.
15 accessible pastel tones
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 / #133E4APermanent content mappings
NewsClub notesGalleriesSenior AAcademyClub policyCommitteeFixtures & ResultsSummer Camp300 ClubChild WelfareIrish football
Listing patterns
Two deliberate variants, both using the same small primary button from the shared button system.
News listing variant
Text-led row for news and editorial updates.
Summer Camp (Boys & Girls) 2026
Our Summer Camp for boys and girls will take place at Killarney Athletic Grounds at Woodlawn.
Gallery listing variant
Text and action on the left, with a top-aligned 16:9 thumbnail on the right.
Club celebration gallery
A working gallery row showing the shared action treatment, permanent badge and image crop.
Contact patterns
DaisyUI-based contact components defined here first and reused together on the Contact Us page.
Contact details
Contact channels sit with the location content on the real page.
General enquiries
Use a contact card for a clear contact channel and its supporting context.
sec@killarneyathletic.comPage patterns
The shared structure for non-home pages before the individual content changes.
Contained module title
Updated 29 Jul 2026
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.
Connected throughIrish Football
Killarney Athletic is part of a wider football community across Kerry, Munster and Ireland.
