
<style>
    .banner .card-header {
        /*height: 60px;*/
    }

    .banner .card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .banner .card-footer {
        /*height: 60px;*/
        margin-top: auto;
    }

    /*.banner .card-content {*/
    /*    height: 180px;*/
    /*}*/
</style>

<div class="columns has-text-centered">
    <div class="column">
        <h3>
            Features
        </h3>
    </div>
</div>

<div class="columns is-multiline banner">
    <div class="column is-one-third">
        <div class="card">
            <div class="card-header has-background-danger">
                <p class="card-header-title">IPython Notebooks and Markdown</p>
            </div>
            <div class="card-content" >
                <p class="content">
                    Use notebooks and markdown files interchangeably for content files and generate an output notebook
                    collection alongside the webpage.
                    <!--                    Create webpages and notebook collections from <code>.ipynb</code> and <code>.md</code> files. Output-->
                    <!--                    formats are configurable per content file and can include both. A typical use case is to create the-->
                    <!--                    main content as a webpage with supplementary exercises as notebooks.-->
                </p>
            </div>
            <div class="card-footer">
                <a href="{{config.url_prefix}}/documentation" class="card-footer-item">Read docs</a>
            </div>
        </div>
    </div>
    <div class="column is-one-third">
        <div class="card">
            <div class="card-header has-background-warning">
                <p class="card-header-title">Perfect for learning materials</p>
            </div>
            <div class="card-content">
                <p class="content">
                    Write exercises/tasks and their solutions in single, testable, content and source files. Marked
                    sections are removed
                    automatically from the output.
                </p>
            </div>
            <div class="card-footer">
                <a href="{{config.url_prefix}}/documentation/04_exercise_tools" class="card-footer-item">Read docs</a>
            </div>
        </div>
    </div>
    <div class="column is-one-third">
        <div class="card" style="height: 100%">
            <div class="card-header has-background-primary">
                <p class="card-header-title">Live-reload</p>
            </div>
            <div class="card-content">

                <p class="content">
                    Courses can serve and automatically rebuild and reload a project's outputs whenever a source file
                    change is detected. This allows for a very visual writing workflow.
                </p>

            </div>
            <div class="card-footer">
                <a href="{{config.url_prefix}}/documentation/02_project_organisation" class="card-footer-item">Read docs</a>
            </div>
        </div>

    </div>
    <div class="column is-one-third">
        <div class="card" style="height: 100%">
            <div class="card-header has-background-primary">
                <p class="card-header-title">Shortcodes</p>
            </div>
            <div class="card-content">
                <p class="content">
                    Extend the possibilities by writing template-backed shortcodes for use in content files. Courses'
                    default project template includes shortcodes for figures, badges, and admonitions.
                </p>
            </div>
            <div class="card-footer">
                <a href="{{config.url_prefix}}/documentation/03_shortcodes" class="card-footer-item">Read docs</a>
            </div>
        </div>
    </div>
    <div class="column is-one-third">
        <div class="card">
            <div class="card-header has-background-warning">
                <p class="card-header-title">Templates and layouts</p>
            </div>
            <div class="card-content">
                <p class="content">
                    Customize webpages and notebook outputs by modifying a project's templates.
                </p>
            </div>
            <div class="card-footer">
                <a href="{{config.url_prefix}}/documentation" class="card-footer-item">Read docs</a>
            </div>
        </div>
    </div>
    <div class="column is-one-third">
        <div class="card" style="height: 100%">
            <div class="card-header has-background-danger">
                <p class="card-header-title">Configurable and extensible</p>
            </div>
            <div class="card-content">

                <p class="content">
                    Output processing can be configured to turn on or off specific features. Courses itself can also
                    easily be extended by using scripts or using its Rust API.*
                </p>

            </div>
            <div class="card-footer">
                <a href="{{config.url_prefix}}/documentation/02_project_organisation" class="card-footer-item">Read docs</a>
            </div>
        </div>
    </div>
</div>