Quick Links — Live Configurator

Quick Links HTML Template

Compatible with Skilljar's HTML sections in pages, courses, and lessons.

Quick Links Widget

Build a row of clickable link cards — perfect for the band between your page hero and the course tiles. Each card links somewhere (a category, a resource, "Start here") with a title, short description, and an optional image. Background and card styling are controlled independently. Copy the finished code into the HTML source editor when you're ready.

Layout Presets

Quick layouts (sets card count, sizes, spacing & placeholder images)

Number of cards

Card behavior

Section eyebrow (optional)

Section headline (optional)

Section sub-headline (optional)

Card Content

Image URL (optional)

Title

Description (optional)

Link URL

Icon fallback (optional — used only if no image)

Image URL (optional)

Title

Description (optional)

Link URL

Icon fallback (optional — used only if no image)

Image URL (optional)

Title

Description (optional)

Link URL

Icon fallback (optional — used only if no image)

Image URL (optional)

Title

Description (optional)

Link URL

Icon fallback (optional — used only if no image)

Colors

Preset themes

Text

Icon / accent

Card background

Typography

Font family

Cards

Card style

Text alignment

Hover lift effect

Media style

Image position

Image box size px

Background

Background style

Background color

Font Sizes

Eyebrow px

Headline px

Sub-headline px

Card title px

Card desc px

Section Padding (px)

Top

Bottom

Left & right (px)

Section Margin (px)

Top

Bottom

Layout Spacing (px)

Below eyebrow

Below headline

Below sub-headline (before cards)

Gap between cards

Below icon

Below title

Live Preview

✓ Saved

Extend this template with AI Prompts

Your config handles the basics. Use these prompts to extend the template with features the configurator can't do. Paste your generated code + one of these prompts into Claude or ChatGPT.

Before you paste a prompt: grab the AI context file from Lesson 1 of the AI with Skilljar course and paste it into your AI chat. This will teach it the Skilljar HTML, CSS, and JS rules.

✦

Add a small number badge to each card

Here is an HTML quick-links card row. In the top corner of each card, add a small circular badge showing a number (1, 2, 3...) in the accent color with white text. Keep everything else unchanged. Return only the updated HTML.

Copy

✦

Add a "learn more" arrow link

Here is an HTML quick-links card row. At the bottom of each card, add a small "Learn more →" text link in the accent color. Keep the whole card clickable. Return only the updated HTML.

Copy

✦

Turn cards into a stats band

Here is an HTML quick-links card row. Convert each card into a stat: replace the icon with a large bold number/metric (e.g. "12k+", "40", "95%") in the accent color at 40px, keep the title as the metric label, and remove the description. Return only the updated HTML.

Copy

✦

Give each card its own accent color

Here is an HTML quick-links card row. Give each card's icon a different color: card 1 #0ea5e9, card 2 #f59e0b, card 3 #10b981, card 4 #a855f7. Keep all other styles unchanged. Return only the updated HTML.

Copy

Live Preview

Paste into the HTML source editor on your Skilljar catalog page