Skip to content
Snippets Groups Projects

Erin Hero Example

  • Clone with SSH
  • Clone with HTTPS
  • Embed
  • Share
    The snippet can be accessed without any authentication.
    Authored by Martin Wolff

    Erin's replacement of the 4.1 hero with dcf classes.

    Edited
    example.html 1.40 KiB
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21 
    <div class="dcf-bleed unl-bg-darker-gray">
        <div class="dcf-relative dcf-mb-8">
            <img class="dcf-d-block" src="images/heroes/andrews-erin-chambers.png" alt="Andrews Hall exterior view" />
            <div class="unl-bg-darkest-gray dcf-absolute dcf-pin-top dcf-h-100% dcf-w-100%" style="opacity: 0.5"></div>
            <div class="dcf-wrapper dcf-absolute dcf-pin-top dcf-h-100% dcf-grid-full dcf-ai-center">
                <div>
                    <h2 class="unl-cream dcf-mb-1">
                    <span class="dcf-subhead">Optional intro</span>
                    <span class="dcf-txt-h5 dcf-uppercase">Heading</span>
                    <span class="dcf-subhead dcf-mt-4 dcf-d-">Optional outro</span>
                    </h2>
                    <a class="dcf-btn dcf-btn-inverse-secondary" href="#">Button 1</a>
                    <a class="dcf-btn dcf-btn-primary" href="#">Button 2</a>
                </div>
            </div>
            <div class="dcf-wrapper dcf-absolute dcf-pin-bottom dcf-w-100%">
                <p class="dcf-txt-2xs dcf-txt-right dcf-uppercase unl-cream unl-font-sans">Photo credit: Erin Chambers</p>
            </div>
        </div>
</div>
<div class="dcf-wrapper">Page content</div>
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Please register or to comment