Component Showcase

Overview of the most used components in the CorrelAid website.

Buttons

Usage Guidelines

Variant	When to use	Examples
`primary`	Main page CTAs. One per visible area max.	"Support", "Donate", "Apply now"
`secondary`	Card actions and secondary CTAs.	"Read more", "Join event", "View project"
`utility`	Functional/tool buttons. Not a CTA.	"Subscribe to calendar", "Newsletter"
`ghost`	Subtle inline links, e.g. in footer.	Footer navigation items
`light`	On dark or colored backgrounds.	Hero overlays
`aid` / `lab`	Brand-specific links with logo. Astro-only.	"CorrelAid", "CorrelLab"
`icon-only`	Icon buttons without text label.	Header calendar/mail icons

Variants

primary Button Label

secondary Button Label

utility Button Label

aid Button Label

lab Button Label

Sizes

compact Button compact

sm Button sm

md Button md

lg Button lg

With Icons

Icon only (label prop) Next

Icon + Label Send Email

Aid Variant (Auto Icon) CorrelAid

Lab Variant (Auto Icon) CorrelLab

Tag Pills

src/lib/components/cards/BaseCard.svelte

Pill-shaped labels used on cards to display primary (type/category) and secondary (technology/topic) metadata. Can be static or clickable to trigger filters.

Primary (static)

ProjectConsultingEducation

Secondary (static)

PythonRMachine Learning

Primary (clickable — click to activate)

Secondary (clickable — click to activate)

Filter (static) — filter-only categories not shown on cards

ProjectConsultingEducation

Filter (clickable — click to activate)

Cards

Base Card

src/lib/components/cards/BaseCard.svelte

Foundation for most specialised cards. Composes visual, bookmark, metadata and action slots.

Routes

//veranstaltungen/projekte/projektdatenbank/jobs

Standard Card (No Visual, with Bookmark Icon)

Standard Project Card with Bookmark

ProjectConsulting PythonRMachine Learning

This version of the BaseCard is designed for cases where no specific icon or date graphic is needed. It provides a clean, text-focused layout that emphasizes the title and tags while maintaining plenty of room for a descriptive teaser text that can span multiple lines.

Full Card (With Visual and Bookmark Icon)