Callout banners
Our 2026 Open House information will be available in December 2025.
We recognize the challenges labour disruption brings for students, families, and staff. It affects daily routines, learning, and childcare. Edmonton Catholic Schools values the essential role that teachers play in our school communities. We continue to pray for a swift and respectful resolution so that teaching and learning can resume without further disruption. We will continue to communicate directly by email and update this webpage as soon as new information is available.
Our 2026 Open House information will be available in December 2025.
We recognize the challenges labour disruption brings for students, families, and staff. It affects daily routines, learning, and childcare. Edmonton Catholic Schools values the essential role that teachers play in our school communities. We continue to pray for a swift and respectful resolution so that teaching and learning can resume without further disruption. We will continue to communicate directly by email and update this webpage as soon as new information is available.
Info Callout (Accent 2)
This example uses var(--accent-2) and a light grey background. Great for general informational messages.
Primary Callout (Primary Brand)
Uses var(--primary-brand) — typically your main brand purple. Ideal for highlighting key announcements.
Secondary Callout (Secondary Brand)
Uses var(--secondary-brand) — the golden accent. Good for notices, dates, or promotional updates.
Accent Callout (Accent 1)
Uses var(--accent-1) — a turquoise highlight. Works well for alerts or links to resources.
Jasper Callout (Custom Example)
This is a custom variant using a Jasper Green tone (#006341). Great if you need an additional theme color.
Danger Callout (Bootstrap Style)
bs-callout-danger - This example highlights critical information such as errors, warnings, or important safety notices.
It uses Bootstrap's #dc3545 palette with your existing callout styling.