7-rows edit

fiftyfifty edit

How to Upload Documents

Not sure how to upload your document(s) into Cascade?

New classes

Tofu qui commodo dolore knausgaard typewriter ex, next level kale chips. Voluptate kinfolk direct trade umami salvia gentrify farm-to-table succulents celiac pinterest. Brooklyn food truck glossier skateboard in snackwave. Green juice nulla freegan literally. Officia sartorial selfies, cupidatat shoreditch vinyl esse wayfarers meditation hot chicken gastropub salvia.

New classes. switched

one
two
three

HTML
Output
SCSS

Expand

Copy

Edit

<section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row FiftyFiftyRow h-theme-white"> <div class="wm-row__mainWrapper wm-split__container h-switch"> <div class="wm-split__side FiftyFiftyRow__side -image"> <div class="video-container"> <iframe allowfullscreen="1" class="video" frameborder="0" id="ytplayer_240_200_nqUSdsNDfiE" src="https://www.youtube-nocookie.com/embed/nqUSdsNDfiE?autohide=1&showinfo=0&rel=0&wmode=transparent&enablejsapi=1" title="YouTube video player" width="240"></iframe> </div> </div> <div class="wm-split__side wm-text FiftyFiftyRow__side -text"> <h3 class="wm-row__title FiftyFiftyRow__title">How to Upload Documents</h3> <div class="wm-row__intro-text FiftyFiftyRow__intro-text"> <p>Not sure how to upload your document(s) into Cascade? </p> </div> </div> </div> </div> </section>  <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row FiftyFiftyRow h-theme-green js-wm-shortcode"> <div class="wm-row__mainWrapper wm-split__container">  <div class="wm-split__side FiftyFiftyRow__side -image"> <div class="h-background-image" style="background-image:url(https://placeimg.com/500/200/nature)"> </div> <img class="FiftyFiftyRow__image h-background-image__img" loading="lazy" src="https://placeimg.com/500/200/nature" alt=""> </div>  <div class="wm-split__side wm-text FiftyFiftyRow__side -text"> <h3 class="wm-row__title FiftyFiftyRow__title">New classes</h3> <div class="wm-row__intro-text FiftyFiftyRow__intro-text"> <p>Tofu qui commodo dolore knausgaard typewriter ex, next level kale chips. Voluptate kinfolk direct trade umami salvia gentrify farm-to-table succulents celiac pinterest. Brooklyn food truck glossier skateboard in snackwave. <a href="">Green juice</a> nulla freegan literally. Officia sartorial selfies, cupidatat shoreditch vinyl esse wayfarers meditation hot chicken gastropub salvia.</p> </div> <div class="wm-row__buttons FiftyFiftyRow__buttons"> <button class="wm-row__button FiftyFiftyRow__button button">Read more about</button><button class="wm-row__button FiftyFiftyRow__button button">next level</button><button class="wm-row__button FiftyFiftyRow__button button">kale</button> </div> </div> </div> </div> </section>  <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row FiftyFiftyRow h-theme-white js-wm-shortcode"> <div class="wm-row__mainWrapper wm-split__container h-switch">  <div class="wm-split__side FiftyFiftyRow__side -image"> <div class="h-background-image" style="background-image:url(https://placeimg.com/500/400/nature)"> </div> <img class="FiftyFiftyRow__image h-background-image__img" loading="lazy" src="https://placeimg.com/500/400/nature" alt=""> </div>  <div class="wm-split__side wm-text FiftyFiftyRow__side -text"> <h3 class="wm-row__title FiftyFiftyRow__title">New classes. switched</h3> <div class="wm-row__buttons FiftyFiftyRow__buttons"> <button class="wm-row__button FiftyFiftyRow__button button">Read more about next level kale Read more about next level kale</button> </div> </div> </div> </div> </section>  <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row FiftyFiftyRow h-theme-silver js-wm-shortcode"> <div class="wm-row__mainWrapper wm-split__container">  <div class="wm-split__side FiftyFiftyRow__side -image"> <div class="h-background-image" style="background-image:url(https://placeimg.com/500/400/nature)"> </div> <img class="FiftyFiftyRow__image h-background-image__img" loading="lazy" src="https://placeimg.com/500/400/nature" alt=""> </div>  <div class="wm-split__side wm-text FiftyFiftyRow__side -text"> <h3 class="wm-row__title FiftyFiftyRow__title sr-only">List example</h3> <div class="wm-row__intro-text FiftyFiftyRow__intro-text"> <p>Tofu qui commodo dolore knausgaard typewriter ex, next level kale chips. Voluptate kinfolk direct trade umami salvia gentrify farm-to-table succulents celiac pinterest. Brooklyn food truck glossier skateboard in snackwave. <a href="">Green juice</a> nulla freegan literally. Officia sartorial selfies, cupidatat shoreditch vinyl esse wayfarers meditation hot chicken gastropub salvia.</p> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </div> <div class="wm-row__buttons FiftyFiftyRow__buttons"> <button class="wm-row__button FiftyFiftyRow__button button">Read more about next level kale Read more about next level kale</button> </div> </div> </div> </div> </section>

Copy

Edit

/* scss/7-components/_fiftyfifty.scss */ /* ================== 5050 ========================= */ // components used // * .wm-row // * .wm-text // * .wm-split // styles start mobile first // row-specific overrides // .wm-row class is added to facilitate smooth updates // it can be removed once the update is published .wm-row { &.FiftyFiftyRow { figcaption { display: table-caption; caption-side: bottom; text-align: left; font-size: 13px; line-height: 20px; letter-spacing: 0.24px; padding-top: 11px; color: var(--theme-figcaption-color); a { color: var(--theme-link-color); } } figure { display: table; &.video-figure { width: 100%; } } } .FiftyFiftyRow { &__title, &__title > a { // title needs padding to separate it from the image on mobile margin-top: 0; padding: kspaces(lg) 0 0; text-align: left; letter-spacing: 0.045rem; line-height: 1.1; font-size: toRem(32); font-feature-settings: "lnum"; @include breakpoint($mobile-to-wide-mobile-breakpoint) { margin-top: inherit; } } &__intro-text { text-align: left; margin: 0; line-height: 1.85; letter-spacing: 0.011em; } &__title:not(.sr-only) + .FiftyFiftyRow__intro-text { margin-top: 23px; // = 48px w line height @include breakpoint($mobile-to-wide-mobile-breakpoint) { margin-top: 30px; } } &__title.sr-only + .FiftyFiftyRow__intro-text { margin-top: 27px; @include breakpoint($mobile-to-wide-mobile-breakpoint) { margin-top: 0; } } &__intro-text > p:first-child { margin-top: 0; } &__image { display: block; width: auto; max-width: 100%; } &__buttons { margin-top: 0; padding: 0; justify-content: flex-start; } // add spacing between title and buttons // if that is all there is &__title + .FiftyFiftyRow__buttons { margin-top: 48px; } &__intro-text + .FiftyFiftyRow__buttons { margin-top: 40px; // = 44px with line-height } &__button { min-width: 240px; // not sure why this is here // &:nth-child(n + 2) { // margin-top: 1.066rem; // } span { overflow: auto; white-space: normal; } } &__side.-text { text-align: left; align-items: flex-start; width: 100%; @include breakpoint($mobile-to-wide-mobile-breakpoint) { padding-left: 50px; // backup value for older browsers padding-left: clamp(22px, 7%, 70px); padding-right: 0; } } } } .wm-row .h-switch .FiftyFiftyRow__side.-text { padding-left: 0; padding-right: 50px; padding-right: clamp(22px, 7%, 70px); } .video-container { position: relative; width: calc(100vw - 44px); padding-bottom: 56.25%; @include breakpoint($mobile-to-wide-mobile-breakpoint) { width: 100%; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } } // for mobile width and narrower @include breakpoint($mobile-to-wide-mobile-breakpoint, max) { // on mobile, override h-switch // so the image stays on top .wm-row__mainWrapper.h-switch { & > *:first-child { order: 1; } & > *:last-child { order: 2; } } } @include breakpoint($mobile-to-wide-mobile-breakpoint) { .wm-row.FiftyFiftyRow { padding-left: 50px; padding-right: 50px; padding-left: clamp(22px, 6%, 70px); padding-right: clamp(22px, 6%, 70px); } .wm-row .FiftyFiftyRow { &__mainWrapper { max-width: 1288px; } // align text left &__side.-text { align-items: flex-start; } // align images towards text &__side.-image { align-items: flex-end; } // remove padding title needed on mobile &__title, &__title > a { font-size: toRem(42); padding: 0; } } .wm-row .h-switch .FiftyFiftyRow__side.-image { align-items: flex-start; } .wm-row.FiftyFiftyRow .h-switch figcaption { text-align: right; } }