Defending Alberta's
Digital Perimeter.

Accordion

Fields & help text

Parent: Accordion (accordion)

Child: Accordion item (accordion_content)

Testimonials Section

What it does: Displays a centered section heading followed by a responsive grid of testimonial quote cards. The cards are pulled in automatically from your Testimonial content — you don't add quotes inside this component.

Fields on this component:

If you leave both empty, the heading block is hidden and only the quote cards show.

Where the quotes come from: The grid is fed by the Testimonials view, which lists all published Testimonial content items (newest first, up to 12). To add or edit quotes, create/edit Testimonial content, not this paragraph.

Testimonial content fields (created separately):

How to use:

1. Create your Testimonial content items (Name + Role + Quote) and publish them.
2. Add the Testimonials Section component to your page.
3. Optionally fill in the Section subtitle and Section title.
4. Save — the published testimonials appear automatically in the grid.

Statistics

What it does: Displays a row of key metrics (big number + short label) in a centered, responsive grid — 3 across on desktop, stacking to 1 column on mobile. Great for highlighting impact figures like "500+ organizations protected".

Structure: This is a two-part component:

1. Statistics (parent) — the section wrapper / grid.
2. Statistics Item (child) — one metric, added repeatedly inside the parent.

Fields on Statistics (parent):

Fields on each Statistics Item (child):

Each item only renders the parts you fill in — a Figure with no Caption (or vice-versa) still works.

How to use:

1. Add the Statistics component to your page.
2. Add a Statistics Item for each metric (recommended: 3 or 6 for even rows).
3. In each item, enter a short Figure and a brief Caption.
4. Save — items display side-by-side, centered, and stack on mobile.

Example values:

Tips:

• Use 3 items per row for the cleanest layout (the grid is 3-wide on desktop).
• Keep figures punchy (2–5 characters) so the large type stays on one line.
• Captions read best as 2–4 words.

Intro Callout

What it does: Displays a centered introductory panel with a subtle orange-tinted background — an eyebrow label, a heading, and a lead paragraph. Ideal for opening a page or section with a short, attention-grabbing statement.

Fields on this component:

Each part only renders when filled in, so you can use any combination (e.g. heading + body, or subtitle + heading only).

How to use:

1. Add the Intro Callout component to your page (usually near the top).
2. Optionally enter a short Section subtitle (eyebrow).
3. Enter the Section title (main message).
4. Add supporting Body text — keep it to 1–3 sentences for the best look.
5. Save — the content appears centered inside a rounded, orange-tinted panel.

Example values:

• Section subtitle: Our mission
• Section title: Building a cyber-resilient Alberta
• Body: We help organizations across the province prevent, detect, and respond to cyber threats with practical tools and trusted guidance.

Tips:

• Best used as a single, standalone intro — not repeated multiple times on one page.
• Keep the body short; it's styled as a larger "lead" paragraph for emphasis.
• The panel and accents use the brand orange automatically — no styling needed.

Text Block with Image

What it does: Displays a two-column section with text on one side and an image on the other. The text column includes an optional eyebrow, a heading, body copy, and a call-to-action link or button. The image can sit on the left or right, and the section background can be white or light gray.

Fields on this component:

The referenced Text Block provides:

How to use:

1. Add the Text Block with Image component to your page.
2. Add/select a Text Block and fill in its heading + content.
3. Upload or select an Image.
4. Choose Image position (left/right) and Background color (white/gray).
5. Optionally add a Button and pick the CTA style (link or button).
6. Save — the text and image display side-by-side (stacked on mobile).

Example values:

• Section title (eyebrow): Our approach
• Text Block heading: Security built for real-world teams
• Text Block content: From risk assessments to incident response, we give your organization the tools and guidance to stay protected — without the complexity.
• Image: (team/illustration image)
• Image position: Right
• Background color: White
• Button: Learn more → /about
• CTA style: link

Tips:

• The text column is wider (2/3) than the image column (1/3) for a balanced editorial look.
• Use the button CTA style for primary actions, link style for softer "read more" links.
• Alternate the image position between stacked sections for visual rhythm.

Information Cards

Example values:

• Eyebrow: Get started
• Heading: Practical guidance
• Introduction: Take the next step with these quick resources.
• Columns lg/md: 3 / 2, Grid gap: 8
• Gray background: off, Vertical stack: off
• Cards: add Icon / Practice / Playbook / Game / Template cards

Note on Vertical stack layout: turn this on when you want a single-column, numbered "step-by-step" look instead of a grid (the column settings are effectively overridden). Leave it off for the normal multi-column grid.

1. Icon Card (icon_card)

A card with an SVG icon in a tinted square, title, description, an accent line, and an optional button.

Example: Title Secure your accounts · Description Enable MFA everywhere it's offered. · Accent Identity · SVG picture1.svg · Button Learn more → /

2. Practice Card (practice_card)

A minimal card — just a title and body. Used for best-practice / step lists.

Example: Title Patch promptly · Body Apply security updates as soon as they're released to close known gaps.

3. Playbook Card (playbook_card)

A card for playbooks/guides with a category label and a "Last updated" line.

Example: Category Incident Response · Title Ransomware Response Playbook · Body Step-by-step actions for the first 24 hours of a ransomware event. · Last updated October 2024 · Full width off

4. Game Card (game_card)

A playful card with an emoji icon and a meta line (e.g. age range).

Example: Icon ?️ · Title Phish or Legit? · Meta line Ages: 12+ · Body Test your skills spotting phishing emails in this quick game.

5. Template Card (template_card)

A card for downloadable templates with a text link + arrow.

6. Paragraph (function_card)

Component type: Paragraph (function_card)
Template: paragraph--function-card.html.twig
Used in: Information Cards / grid sections on Landing pages

Description

A compact, numbered card used to present a single function, step, or capability. Each card shows an orange circular number badge, a short bold title, and a supporting line of description. Cards are designed to sit in a responsive grid (typically 2–3 across) to communicate a sequence or set of related functions at a glance.

When to use

• Outlining a process broken into numbered steps (01, 02, 03…).
• Highlighting a set of core functions, services, or capabilities.
• Any time you need a clean, scannable grid of short titled blurbs.

When not to use

• For long-form content — keep the body to one or two sentences.
• For clickable navigation cards (this component is not a link).
• For image-led cards — Function Card is text-only.

Fields

Notes

• All three fields are optional, so the card degrades gracefully (e.g., title + body with no badge).
• Body text is stripped of HTML tags on output — plain text only is displayed.

Program Details (program_details)

Fields & help text

Heading for the Text block: Program Details

Example values:

• Section eyebrow: Program Details
• Section heading: Duration, Qualifications and Next Intake
• Duration label: Duration · Duration headline: 24 Months · Duration description: Part-time, online-first study designed around working professionals.
• Next intake label: Next Intake · Next intake headline: Scheduled for 2027
• Qualifications heading: Who Can Apply
• Qualification bullets (add separately): Open to Alberta residents 18+, High school diploma or equivalent, Basic IT familiarity recommended

Tip: field_qualification_line is multi-value — click "Add another item" for each bullet rather than putting them all in one field.

Practice Cards (practice_cards)

Fields & help text

Child: Practice Card (practice_card)

Heading for the Text block: Practice Cards

Example values:

• Section subtitle: Best practices
• Section title: Cyber hygiene essentials
• Show step numbers: on (gives numbered orange badges + left border)
• Practice card 1 — Title: Patch promptly · Body: Apply security updates as soon as they're released to close known gaps.
• Practice card 2 — Title: Use strong MFA · Body: Prefer app-based or hardware authenticators over SMS codes.
• Practice card 3 — Title: Back up your data · Body: Keep tested, offline backups so you can recover quickly from ransomware.

Tip: Turn on Show step numbers when the cards represent an ordered set of steps; leave it off for an unordered list of tips.

Contact Cards (contact_cards)

Fields & help text

Child: Contact Card (contact_card

Heading for the Text block: Contact Cards

Example values:

• Section subtitle: Get in touch
• Section title: Contact our team
• 3 Columns: on
• Contact card 1 — Title: General inquiries · Body: Questions about programs, membership, or events. · Accent: [email protected] · Icon: (image/SVG) · Button: Email us → mailto:[email protected]
• Contact card 2 — Title: Report a threat · Body: Notify our team of suspicious activity or an active incident. · Accent: 24/7 hotline · Button: Report → /
• Contact card 3 — Title: Media requests · Body: For interviews and press enquiries, reach our communications team. · Accent: Press · Button: Contact → /

Tip: Use 3 Columns with exactly 3 (or 6) cards for an even row; leave it off for a 2-column layout.

Contact Form Section (contact_form_section)

Fields & help text

Heading for the Text block: Contact Form Section

Example values:

• Eyebrow: Send a Message
• Heading: Contact us
• Introduction: Have a question or need to report something? Send us a message and our team will get back to you.
• Contact email line: [email protected]
• Response time line: We respond within 2 business days.
• Webform: Contact us
• Gray section background: on

Tip: The Contact email line auto-links as mailto: only if it looks like an email address — plain labels (e.g. "Support team") render as text. Pick a real webform in Webform, or the right column renders empty.

Call To Action

Fields & help text

Heading for the Text block: Call To Action

Example values:

• Section subtitle: Take Action
• Title: Ready to strengthen your defenses?
• Description: Join the CyberAlberta community and get the tools, guidance, and support to stay protected.
• Link: Join now → /
• Layout variant: navy (full-width dark band) — or light / white for a softer look

Tip: Use the navy variant for a bold, high-contrast call to action at the end of a page; use light/white when it sits between other light sections and you want it to blend in.

Child Pages (child_pages)

Fields & help text

Parent: Child Pages (child_pages)

Child: Child Page (child_page)

Heading for the Text block: Child Pages

Example values:

• Section title: Browse topics
• Child page 1 — Link title: Phishing · Destination link: /phishing · Wayfinding text: Learn how to spot and avoid phishing emails before they reach your inbox.
• Child page 2 — Link title: Passwords · Destination link: /passwords · Wayfinding text: Build strong, unique passwords and manage them safely.
• Child page 3 — Link title: Ransomware · Destination link: /ransomware · Wayfinding text: Understand how ransomware spreads and how to defend against it.

Tip: The parent note "Used when Slides from navigation is off" means the manually-added Child page items are the source when you're not auto-filling slides from a menu. Add one Child page per link/card you want to show.

Code (code)

Fields & help text

Code (code)

Heading for the Text block: Code

Tips:

• Use this for third-party embeds (videos, maps, forms, widgets) or any custom HTML markup not covered by the other components.
• The output is raw and unfiltered — only paste code from sources you trust, since scripts/iframes run as-is.
• Wrap your markup in a container if you need spacing/centering; the component itself just prints the field value inside the standard paragraph wrapper.
   

Webform (webform)

Fields & help text

Webform (webform)

Heading for the Text block: Webform

Example values:

• Section title: Contact us
• Form: Contact (pick an existing webform from the dropdown)
• Disclaimer: Your information is collected under the authority of the FOIP Act and will only be used to respond to your inquiry.

Tips:

• The actual form fields are NOT edited here — build/manage them at /admin/structure/webform. This component only places the chosen form on the page.
• Leave Section title empty if the form already has its own heading above it.

Media Block (media_block)

Fields & help text

Media Block (media_block)

Heading for the Text block: Media Block

Example values:

• Section title: How it works
• Media block: select an image, or add a remote video like https://www.youtube.com/watch?v=dQw4w9WgXcQ
• Caption: Figure 1: Reporting a phishing email step by step.

Tips:

• Allowed media types: Image, Video (uploaded file), and Remote video (YouTube/Vimeo). Remote videos render in a responsive 16:9 frame.
• The media is shown centered in a rounded, shadowed card; the caption is optional and appears beneath it.