Curriculum Overview Hero Template

Clearly outline what students will learn with a hero that highlights your course curriculum.

This layout helps potential students see the tangible value and skills they will gain, pairing a concise list of learning objectives with the main course information and call-to-action.

A hero section with bullet points outlining the course curriculum.

Get Source Code Preview

About the Curriculum Overview Hero

Before enrolling in a course, students want to know exactly what they're signing up for. This hero section is designed to answer that question by providing a clear, scannable overview of the curriculum. By listing the main skills and topics covered, you build transparency and confidence, making it easier for a potential student to decide if the course is right for them.

Features

Learning-Focused Content: Directly showcases what students will learn, providing immediate value.
Scannable Checklist: A bulleted list with icons makes the curriculum points easy to digest.
Professional Two-Column Layout: Clearly separates the main course call-to-action from the curriculum details on larger screens.
Fully Responsive: The layout stacks vertically on mobile devices for easy reading on any screen size.

Code Breakdown

The component is delivered as a CSS block for your website's head and an HTML block for the body.

The .curriculum-hero-container uses CSS Grid (display: grid) to create its layout. On desktops, grid-template-columns: repeat(2, 1fr) divides the space into two equal columns. This automatically becomes a single-column layout on mobile.

The curriculum points are in an unordered list (ul). Each list item (li) is a Flexbox container itself, which allows for the simple vertical alignment of the checkmark icon and the text. The inline svg icons are lightweight and can be easily styled with CSS via the currentColor value.

Code

<style>
    :root {
        --coh-padding: 4rem 1.5rem;
        --coh-bg-color: #fafafa;
        --coh-content-bg: #ffffff;
        --coh-text-color: #3f3f46;
        --coh-headline-color: #18181b;
        --coh-accent-color: #059669;
        --coh-cta-bg: #059669;
        --coh-cta-hover-bg: #047857;
        --coh-cta-text-color: #ffffff;
        --coh-max-width: 1024px;
        --coh-border-radius: 12px;
    }
    .curriculum-overview-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--coh-bg-color);
        padding: var(--coh-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .curriculum-overview-hero * {
         box-sizing: border-box;
    }
    .curriculum-hero-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: var(--coh-max-width);
        width: 100%;
        background-color: var(--coh-content-bg);
        border-radius: var(--coh-border-radius);
        padding: 2rem;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
    }
    .coh-content .title {
        color: var(--coh-headline-color);
        font-size: clamp(2rem, 5vw, 2.75rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .coh-content .description {
        color: var(--coh-text-color);
        margin: 0 0 2rem;
        line-height: 1.6;
        font-size: 1.1rem;
    }
    .coh-content .cta {
        display: inline-block;
        background-color: var(--coh-cta-bg);
        color: var(--coh-cta-text-color);
        padding: 0.9rem 2rem;
        border-radius: 8px;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    .coh-content .cta:hover {
        background-color: var(--coh-cta-hover-bg);
    }
    .coh-curriculum .list-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 1.5rem 0;
        color: var(--coh-headline-color);
    }
    .coh-curriculum .curriculum-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .coh-curriculum .curriculum-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        color: var(--coh-text-color);
    }
    .coh-curriculum .curriculum-item svg {
        flex-shrink: 0;
        width: 1.25em;
        height: 1.25em;
        color: var(--coh-accent-color);
        margin-top: 0.15em;
    }

@media(min-width: 992px) {
        .curriculum-hero-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 4rem;
            padding: 4rem;
        }
    }
</style>

<section class="curriculum-overview-hero">
    <div class="curriculum-hero-container">

<div class="coh-content">
            <h1 class="title">The Art of Storytelling</h1>
            <p class="description">Master the craft of narrative. This course covers everything from character development to plot structure, empowering you to write stories that captivate and resonate.</p>
            <a href="#" class="cta" role="button">Enroll in this Course</a>
        </div>
        
        <div class="coh-curriculum">
            <h2 class="list-title">What you'll learn in this course:</h2>
            <ul class="curriculum-list">
                <li class="curriculum-item">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                    <span>Core principles of narrative structure and pacing.</span>
                </li>
                <li class="curriculum-item">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                    <span>Techniques for creating memorable, multi-dimensional characters.</span>
                </li>
                <li class="curriculum-item">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                    <span>How to write compelling dialogue that reveals character and plot.</span>
                </li>
                 <li class="curriculum-item">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                    <span>Strategies for revising and editing your work to a professional standard.</span>
                </li>
            </ul>
        </div>
        
    </div>
</section>

View Output