search

unlcms / project-herbie

Drupal 10 implementation at the University of Nebraska–Lincoln
https://cms.unl.edu
GNU General Public License v2.0
4 stars 6 forks source link

Components: CTA #306

Open crayruris opened 2 months ago

crayruris commented 2 months ago 
<div class="dcf-bleed dcf-wrapper unl-bg-scarlet">
    <div class="dcf-grid-thirds@sm dcf-col-gap-6 dcf-row-gap-3 dcf-pt-6 dcf-pb-6">

        <div class="dcf-d-flex dcf-ai-center dcf-jc-center">
            <h2 class="dcf-mb-0 dcf-uppercase unl-cream">
                <span class="unl-font-display">Create Your Path</span>
            </h2>
        </div>

        <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2">
            <p class="dcf-mb-0 unl-cream dcf-txt-center">Iowa blends leadership in the arts with pioneering scientific research, helping students carve their own unique path–wherever it leads.</p>
        </div>

        <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2">
            <a href="https://uiowa.edu/" class="dcf-btn dcf-btn-inverse-primary dcf-uppercase">Request Information
            </a>
        </div>

    </div>
</div>
ericras commented 2 months ago

449f48f0754c4921bc7bfbc681ae3ed53d60d01d

ericras commented 2 months ago

The initial build-out is committed. Needs work so it flexes better in different grid sizes

crayruris commented 2 months ago

This should be able to be plopped into any sized grid component

            <div class="dcf-col-100% dcf-grid-thirds@md dcf-col-gap-6 dcf-row-gap-3 dcf-p-6 unl-bg-scarlet">
                <div class="dcf-d-flex dcf-ai-center dcf-jc-center">
                    <h2 class="dcf-mb-0 dcf-uppercase unl-cream"><span class="unl-font-display">Create Your Path</span></h2>
                </div>
                <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2">
                    <p class="dcf-mb-0 unl-cream dcf-txt-center">Iowa blends leadership in the arts with pioneering scientific research, helping students carve their own unique path–wherever it leads.</p>
                </div>
                <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2">
                    <a class="dcf-btn dcf-btn-inverse-primary dcf-uppercase" href="https://uiowa.edu/">Request Information</a>
                </div>
            </div>
crayruris commented 1 month ago
    • It looks like the classes applied to the H2 were moved up to the parent div, which works except for the margin bottom on the H2 still needs to be there as it throwing off the horizontal alignment. 2.- In Dark Mode the body text is #c7c8ca instead of cream.normal text fails wcag AA and wcag AAA for large text contrast testing.