Verndale UI Components

C-FMT-6: Content Row: Default 

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

" aria-labelledby="contentRowHeadline">
    <figure class="content-row__media">
        <picture>
            <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
            <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
            <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
        </picture>

    </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": "right",
  "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
}
  • 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.