USWDS Hero Tablet, Mobile and Desktop Grid Review

index.html

<section class="usa-hero">
            <div class="grid-container">
                <div class="grid-row">
                    <div class="usa-hero__callout rd-hero__callout desktop:grid-col-4 desktop:grid-offset-8 tablet:grid-col-6 tablet:grid-offset-6 grid-col-12 grid-offset-none">
                        <h1 class="text-base-darker usa-hero__heading"><span class="text-green">Seven</span> Research
                            Stations and <span class="text-green">81</span> Experimental Forests and Ranges.</h1>
                        <a class="usa-button usa-button--secondary" href="javascript:void(0)"><small>Learn more about
                                what we do</small> </a>
                    </div>
                </div>
            </div>
        </section>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.0.1/js/uswds.min.js"></script>

style.scss

.rd-hero__callout{background:rgba(white,.9)}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.0.1/css/uswds.min.css" rel="stylesheet" />

uswds-hero-tablet-mobile-and-desktop-grid-review.markdown

USWDS Hero Tablet, Mobile and Desktop Grid Review

A Pen by jasonjflaherty on CodePen.

License.