7-rows edit

callout  edit

Rerum eligendi velit aperiam reiciendis similique magnam distinctio

Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem adipisci repudiandae excepturi repellat ut et quas laboriosam aliquid nam.

Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.

New classes - buttons only

Welcome to William & Mary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius quis odio fermentum facilisis. Sed tortor nisi, laoreet non tempus non, finibus ut nunc. Fusce feugiat iaculis ultricies. Sed eget quam nec erat ultrices ullamcorper. Aliquam eget velit sem. Fusce sit amet tincidunt augue. Integer tempus, risus id tempor lacinia, est mauris vestibulum neque, eu convallis mi leo ut purus.

Theme Tests

green > green. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

green > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

green > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

green > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > green. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > green. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > green. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

blue > blue. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

blue > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

blue > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

blue > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > blue. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

silver > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > blue. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

white > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > blue. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > silver. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > white. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

image > image. Because it takes a research university.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

William & Mary is a top public research university making our share of a university's contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.

Copy
Edit
<section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row CalloutRow h-theme-green"> <div class="h-background-image h-background-image--darken" style="background-image:url(https://placeimg.com/1000/480/nature)"></div> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title CalloutRow__title">Rerum eligendi velit aperiam reiciendis similique magnam distinctio</h3> <div class="wm-row__intro-text CalloutRow__intro-text"> <p>Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem <a href="">adipisci repudiandae</a> excepturi repellat ut et quas laboriosam aliquid nam.</p> <p>Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.</p> </div> <div class="wm-row__buttons CalloutRow__buttons"> <a class="wm-row__button button CalloutRow__button" href=""> WWWWWWWWWW WWWWWWWWWWWWWWWWWW </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> </div> </div> </div> </section> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row CalloutRow h-theme-silver -buttons-only"> <div class="h-background-image h-background-image--darken" style="background-image:url(https://placeimg.com/1000/480/nature)"></div> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title CalloutRow__title sr-only">New classes - buttons only</h3> <div class="wm-row__intro-text CalloutRow__intro-text"> </div> <div class="wm-row__buttons CalloutRow__buttons"> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> </div> </div> </div> </section> <section class="page-theme-wrapper h-theme-white"> <div class="wm-row CalloutRow h-theme-white "> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title CalloutRow__title">Welcome to William &amp; Mary</h3> <div class="wm-row__intro-text CalloutRow__intro-text"> <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius quis odio fermentum facilisis. Sed tortor nisi, laoreet non tempus non, finibus ut nunc. Fusce feugiat iaculis ultricies. Sed eget quam nec erat ultrices ullamcorper. Aliquam eget velit sem. Fusce sit amet tincidunt augue. Integer tempus, risus id tempor lacinia, est mauris vestibulum neque, eu convallis mi leo ut purus.</span><span></span></p> <p><span class="js-wm-shortcode"> <figure class="yt-center figure-lg"> <div class="yt-lg"><iframe title="" allowfullscreen="true" frameborder="0" height="388" src="https://www.youtube-nocookie.com/embed/EVD_T5iBOuU?rel=0&amp;showinfo=0&amp;autohide=1&amp;wmode=transparent&amp;html5=1" width="693"></iframe></div> <figcaption></figcaption> </figure> </span></p> </div> </div> </div> </section> <h2>Theme Tests</h2> <?php $themeNames = array("green", "silver", "white", "image"); foreach ($themeNames as $name) { for ($i = 0; $i < count($themeNames); $i++) { echo ' <section class="page-theme-wrapper h-theme-' . $name . '"> <div class="wm-row CalloutRow h-theme-' . $themeNames[$i] . '"> <div class="h-background-image h-background-image--darken" style="background-image:url(https://placeimg.com/1000/480/nature)"></div> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title CalloutRow__title">' . $name . ' > ' . $themeNames[$i] . '. Because it takes a research university.</h3> <div class="wm-row__intro-text CalloutRow__intro-text"> <p>William & Mary is a top public research university making our share of a university\'s contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both <a href="">collaboration and efficiency</a>.</p> <p>William & Mary is a top public research university making our share of a university\'s contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.</p> </div> <div class="wm-row__buttons CalloutRow__buttons"> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> </div> </div> </div> </section> '; } } $themeNames2 = array("blue", "silver", "white", "image"); foreach ($themeNames2 as $name2) { for ($i = 0; $i < count($themeNames2); $i++) { echo ' <span class="vims"> <section class="page-theme-wrapper h-theme-' . $name2 . '"> <div class="wm-row CalloutRow h-theme-' . $themeNames2[$i] . '"> <div class="h-background-image h-background-image--darken" style="background-image:url(https://placeimg.com/1000/480/nature)"></div> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title CalloutRow__title">' . $name2 . ' > ' . $themeNames2[$i] . '. Because it takes a research university.</h3> <div class="wm-row__intro-text CalloutRow__intro-text"> <p>William & Mary is a top public research university making our share of a university\'s contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both <a href="">collaboration and efficiency</a>.</p> <p>William & Mary is a top public research university making our share of a university\'s contributions to the creation of knowledge — research and scholarship. Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency.</p> </div> <div class="wm-row__buttons CalloutRow__buttons"> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> <a class="wm-row__button button CalloutRow__button" href=""> Learn more </a> </div> </div> </div> </section> </span> '; } }
Copy
Copy
Edit
/* scss/7-rows/_callout-test.scss */ /* ================== CALLOUT ========================= */ // components used // * .wm-row // * .wm-text // * .wm-row-buttons // row-specific overrides .CalloutRow { min-height: auto; // spacing between title and buttons &__title + &__buttons { margin-top: 48px; } &__buttons { display: flex; padding: 0 kspaces(lg); align-items: stretch; .-buttons-only & { margin-top: 0; } } &__button { // remove margin as gap is now used margin: 0 !important; // default button style overrides padding: 1rem !important; width: 100% !important; // make sure buttons remain the same height, even with text wrap display: flex !important; align-items: center; justify-content: center; span { // too much text gets hidden display: block; overflow: hidden; width: 100%; } @include breakpoint(380px) { // non-dynamic button width width: 307px !important; } } }