7-rows edit

links-row edit

Helpful Resources

Diversity
Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Campus Life
Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Helpful Resources

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat aliquet dictum. Proin quis elementum augue. Vestibulum mi enim, euismod in tincidunt id, tempor gravida urna. Mauris mollis nisl id pellentesque consectetur.

HTML
Output
SCSS

Expand

Copy

Edit

<section class="page-theme-wrapper h-theme-green"> <div class="wm-row LinksRow h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title LinksCapRow__title">Helpful Resources </h3> <div class="wm-row__intro-text LinksRow__intro-text"> </div> <ul class="LinksRow__links -has-two"> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Diversity </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Campus Life </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> </ul> </div> </section> <section class="page-theme-wrapper h-theme-green"> <div class="wm-row LinksRow h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title LinksCapRow__title">Helpful Resources </h3> <div class="wm-row__intro-text LinksRow__intro-text"> </div> <ul class="LinksRow__links"> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Diversity </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Campus Life </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Campus Life </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Campus Life </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> <li class="LinksRow__link-container -has-caption"> <a class="LinksRow__link" href="#"> <span>Health & Wellness </span> <p class="LinksRow__caption">Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </a> </li> </ul> </div> </section> <section class="page-theme-wrapper h-theme-silver"> <div class="wm-row LinksRow h-theme-silver"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title LinksCapRow__title">Helpful Resources </h3> <div class="wm-row__intro-text LinksRow__intro-text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat aliquet dictum. Proin quis elementum augue. Vestibulum mi enim, euismod in tincidunt id, tempor gravida urna. Mauris mollis nisl id pellentesque consectetur.</p> </div> <ul class="LinksRow__links -no-caption"> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Diversity </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Campus Life </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Health & Wellness </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Food & Dining </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Athletics </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Clubs & Events (PDF) </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Staying Connected Around Campus and Beyond </span> </a> </li> </ul> </div> </section> <section class="page-theme-wrapper h-theme-white"> <div class="wm-row LinksRow h-theme-white"> <div class="wm-row__mainWrapper">   <ul class="LinksRow__links"> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Diversity </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Campus Life </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Health & Wellness </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Food & Dining </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Athletics </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Clubs & Events (PDF) </span> </a> </li> <li class="LinksRow__link-container"> <a class="LinksRow__link" href="#"> <span>Staying Connected Around Campus and Beyond </span> </a> </li> </ul> </div> </section>

Copy

Edit

/* scss/7-rows/_links-row.scss */ .LinksRow { &__links { display: grid; padding: 0; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); column-gap: 22px; row-gap: 55px; margin-top: 0; position: relative; padding-top: 12px; &.-no-caption { margin-top: 32px !important; } &.-has-two { max-width: 852px; } } &__intro-text + &__links, &__title:not(.sr-only) + &__links { margin-top: 44px; } &__title.sr-only + &__links { margin-top: 0 !important; padding-top: 0; } &__link &__caption { opacity: 0.8; color: var(--theme-text-color); font-weight: 400; margin-top: 8px; margin-bottom: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } &__caption { font-size: toRem(14); } &__link:hover &__caption, &__link:focus &__caption { opacity: 1; color: var(--theme-text-color); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } &__link-container { display: grid; align-content: end; text-align: left; position: relative; &:hover, &:focus { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } & .LinksRow__link { font-size: toRem(16); color: var(--theme-text-color); font-weight: 500; position: relative; display: block; padding-bottom: 10px; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; &:hover, &:focus { text-decoration: none; } &:hover > *:first-child:after, &:focus > *:first-child:after { padding-left: 11px; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } &:hover > *:first-child:before, &:focus > *:first-child:before { background: var(--theme-accent-color); transform: scale3D(1, 1, 1); } html.touch &:hover > *:first-child:before, html.touch &:focus > *:first-child:before { background: var(--theme-accent-color); transform: scale3D(0, 0, 0); } *:first-child { @include rightarrow( $color: var(--theme-accent-color), $paddingfromtext: 7px, $movementamount: 11px, $useFontAwesome: true ); font-size: 1rem; margin: 0; display: block; &::before { position: absolute; content: ""; width: 100%; height: 2px; left: 0; background: var(--theme-accent-color); transition: transform 0.35s; transform: scale3d(0, 0, 0); transform-origin: left; top: 100%; } } } } &__link-container::after { content: ""; height: 2px; width: 100%; background: var(--theme-linksrow-accent-color); // green: wmgreen-90 // silver:#bcbfc0 // white:#bcbfc0 // blue: #8597a9 display: block; z-index: -1; position: absolute; bottom: -2px; left: 0; } &__link-container.-has-caption { align-content: start; } &__link-container.-has-caption::after { content: ""; height: 2px; width: 100%; color: var(--theme-text-color); display: block; z-index: -1; position: absolute; top: -12px; left: 0; } &__link-container.-has-caption &__link > *:first-child::before { position: absolute; content: ""; width: 100%; height: 2px; left: 0; background: var(--theme-accent-color); transition: transform 0.35s; transform: scale3d(0, 0, 0); transform-origin: left; top: -12px; } &__link-container.-has-caption &__link:hover > *:first-child::before, &__link-container.-has-caption &__link:focus > *:first-child::before { background: var(--theme-accent-color); transform: scale3D(1, 1, 1); } html.touch &__link-container.-has-caption &__link:hover > *:first-child::before, html.touch &__link-container.-has-caption &__link:focus > *:first-child::before { transform: scale3D(0, 0, 0); } }