search

unlcms / project-herbie

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

Call to Action Fixes #422

Closed sarongebre closed 10 months ago

sarongebre commented 11 months ago

Fix vertical alignment to call to action

ericras commented 11 months ago

396

crayruris commented 11 months ago

Vertical alignment on H2 is off because it has margin bottom. that needs removed with dcf-mb-0 applied to the H2

crayruris commented 11 months ago

This is the modified CTA, I removed some of the extra divs to get it working. Is that possible? The additions are a dcf-w-max-lg to the paragraph text. and a dcf-d-block and style min width on the button. These coupled with the H2 margin removal should go pretty far to balancing it out better.

<div class="unl-bg-scarlet dcf-col-100% dcf-grid-thirds@md dcf-col-gap-6 dcf-row-gap-3 dcf-p-6">

      <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-uppercase">

            <div><h2>This is the amazing thing!!</h2>
</div>

    </div>

      <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2 dcf-txt-center ">

            <p class="dcf-w-max-lg">Boom! &nbsp;tart typing the title of a piece of content to select it. You can also enter an internal path such as <em>/node/add</em> or an external URL such as <em>http://example.com</em>. Enter <em>&lt;front&gt;</em> to link to the front page. Enter <em>&lt;nolink&gt;</em> to display link text only. Enter <em>&lt;button&gt;</em> to display keyboard-accessible link text only.</p>

    </div>

      <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2">

            <a href="https://cnn.com" class="dcf-btn dcf-btn-inverse-primary dcf-uppercase dcf-d-block" style="
    min-width: 75%;
">Link</a>

    </div>
  </div>