Verndale UI Components

C-FMT-6: Content Row: Media Align Left 

<section class="content-row content-row--media-align-left

" aria-labelledby="contentRowHeadline">
    <figure class="content-row__media">
        <section class="testimonials container scEnabledChrome" data-module="testimonials" sc-part-of="placeholder rendering">
            <header>
                <h2 class="testimonials__heading">
                    <span class="scChromeData"></span><span id="fld_77D47B44369D4ACE84D66C17A275811D_1D631840345E4DDEB0539099EA076EEE_en_1_e6929504dae7493c83cb7b24225421d3_292_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput scEnabledChrome" scfieldtype="single-line text" scdefaulttext="[No text in field]" sc-part-of="field">Testimonial Carousel</span>
                </h2>
            </header>
            <div class="testimonials__slider">
                <div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                    <div class="swiper-wrapper">
                        <span type="text/sitecore" sc-part-of="placeholder rendering" style="display: none;" class="scEnabledChrome"></span>
                        <div class="scEnabledChrome scEmptyPlaceholder" sc-placeholder-id="_Rows_TestimonialCarouselCards__C42E4A27_B288_4A35_82D6_BDF2B96BB2CA__0" sc-part-of="placeholder"></div><code type="text/sitecore" id="scEnclosingTag_" chrometype="placeholder" kind="close" hintname="TestimonialCarouselCards" class="scpm">
                    </div>
                </div>
            </div>
        </section>
    </figure>
    <div class="content-row__content">
        <header>
            <h2 class="content-row__headline" id="contentRowHeadline">vitae tempus quam pellentesque</h2>
            <h3 class="content-row__subhead">rhoncus est pellentesque elit ullamcorper</h3>
        </header>
        <div class="content-row__description rtf">
            <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
        <aside class="content-row__actions">
            <a href="#" class="btn btn--primary">
                vitae tempus
            </a>
            <a href="#" class="link link--primary">
                vitae tempus
                <svg viewBox="0 0 6 10" class="link__icon link__icon--right">
                    <use xlink:href="#chevron-right" />
                </svg>
            </a>
        </aside>
    </div>
</section>
 
{{#*inline "media"}}
  <figure class="content-row__media">
    {{#if videoPlayer}}
    {{>@video videoPlayer=videoPlayer videoId=videoId background=image poster=poster autoplay="false"}}
    {{else}}
    {{#if image}}
      {{#json image}}{{>picture}}{{/json}}
    {{/if}}
    {{/if}}
  </figure>
{{/inline}}

{{#*inline "actions"}}
{{#ifCond buttonLabel "||" linkLabel}}
  <aside class="content-row__actions">
    {{#if buttonLabel}}
    {{>@button type="link" label=buttonLabel className="primary"}}
    {{/if}}
    {{#if linkLabel}}
    {{>@link label=linkLabel className="primary" icon="right"}}
    {{/if}}
  </aside>
{{/ifCond}}
{{/inline}}

<section class="content-row {{#unless fullWidth}}content-row--media-align-{{mediaAlign}}{{/unless}}
{{#if singleColumn}}content-row--single-column{{/if}}
{{#if fullWidth}}content-row--full-width{{/if}}"
aria-labelledby="contentRowHeadline"
>
  {{#if singleColumn}}
  <div class="content-row__content">
    <header>
      <h2 class="content-row__headline" id="contentRowHeadline">{{headline}}</h2>
      {{#if subhead}}<h3 class="content-row__subhead">{{subhead}}</h3>{{/if}}
    </header>
    {{#if description}}
    <div class="content-row__description rtf">
      {{{description}}}
    </div>
    {{/if}}
  </div>
  {{#if media}}
  {{>media}}
  {{/if}}
  {{>actions}}
  {{else}}
  {{#if media}}
  {{>media}}
  {{/if}}
  <div class="content-row__content">
    <header>
      <h2 class="content-row__headline" id="contentRowHeadline">{{headline}}</h2>
      {{#if subhead}}<h3 class="content-row__subhead">{{subhead}}</h3>{{/if}}
    </header>
    {{#if description}}
    <div class="content-row__description rtf">
      {{{description}}}
    </div>
    {{/if}}
    {{>actions}}
  </div>
  {{/if}}
</section>
 
{
  "mediaAlign": "left",
  "image": {
    "srcset": {
      "767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
      "1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
    },
    "src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
    "description": "Image Description"
  },
  "headline": "vitae tempus quam pellentesque",
  "subhead": "rhoncus est pellentesque elit ullamcorper",
  "description": "<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>",
  "buttonLabel": "vitae tempus",
  "linkLabel": "vitae tempus",
  "media": true,
  "videoId": "430133542",
  "videoPlayer": "vimeo"
}
  • Content: 
    .content-row {
  @include mq(desktop) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  &--media-align-left {
    flex-direction: row;
  }

  &--single-column {
    @include mq(desktop) {
      flex-direction: column;
    }
  }
}

.content-row__media {
  width: 100%;

  picture {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;

    img {
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  @include mq(desktop) {
    width: calc(50% - 10px);
  }
}

.content-row__content {
  padding: 24px 20px 28px;

  @include mq(desktop) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    width: calc(50% - 10px);
  }

  .content-row--single-column & {
    margin-bottom: 20px;
  }
}

.content-row__headline {
  color: $primary-color;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.13;
  margin: 0 0 10px;

  @include mq(desktop) {
    margin-bottom: 10px;
  }

  .content-row--single-column & {
    @include mq(desktop) {
      font-size: 50px;
    }
  }
}

.content-row__subhead {
  font-size: 21px;
  margin-bottom: 17px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.17;
  margin: 0 0 10px;

  @include mq(desktop) {
    margin-bottom: 20px;
  }
}

.content-row__actions {
  margin-top: 20px;

  .btn {
    width: 100%;

    @include mq(desktop) {
      width: auto;
    }

    & + .link {
      margin-top: 26px;

      @include mq(desktop) {
        margin-left: 54px;
        margin-top: 0;
      }
    }
  }

  @include mq(desktop) {
    align-items: center;
    display: flex;
  }
}

.content-row--full-width {
  .content-row__content {
    width: 100%;
  }
}
  • URL: /components/raw/content-row/_styles.scss
  • Filesystem Path: src/components/content-row/_styles.scss
  • Size: 1.8 KB

No notes defined.