CEHD Code Examples: Hero Image

Below is all the template and HTML code to create this page.


{% extends "cehd/layout/base.html" %}
{% set page_title = "CEHD Code Examples: Hero Image" %}
{% block title %}{{ page_title }}{% endblock %}
{% block extra_css %}
{{ parent() }}{# include the parent template styles #}
<style>
    .row.has-hero-image {
        margin-top: 450px; /* dial in the top margin */
    }
</style>
{% endblock %}
{% block hero_image %}
<div class="hero-image-container">
    <img class="hero-image" src="/assets/dist/images/giving/hero.jpg" alt="A man in a classroom where he does his residency.">
    <div class="hero-overlay">
        <div class="twothird">
            <p>A gift from the Bentson Foundation supports<br>
                future teachers in two pathbreaking residency programs</p>
        </div>
        <div class="third">
            <p><a href="" class="to-upper button clear">Read more</a></p>
        </div>
    </div>
</div>
{% endblock %}
{% block main_content %}
<div class="row has-hero-image">
    <div class="container">
        <h1>{{ page_title }}</h1>
        <p>Below is all the template and HTML code to create this page.</p>
    </div>
</div>
{% endblock %}

Note that we have to put the code for the hero image in a hero_image block.

Next, the image should be wrapped in a div with the hero-image-container class. This will ensure that it's positioned correctly on the page.

The overlay text should be wrapped in a div with the hero-overlay class. That will position it and give the text the correct color and size.

Within the hero-overlay you can use whichever column classes you wish. In general a twothird/third combination seems to work well.

Since top nav and header dimensions will vary slightly between sites, you'll need to dial in the top margin for the .row.has-hero-image class in an extra_css block. Note: remember to include the parent styles like the example above. You may need to tweak other styles as well

Finally, any a tag with button and clear classes will give the link the proper styles and position. The to-upper class is optional. It transforms the text to all uppercase.