<div class="feature  feature--dark-teal ">
    <div class="feature__text">
        <h2 class="headline-group ">

            <span class="headline-group__head">Every feature block should have a headline</span>

        </h2>

        <p class="">
            At other points, Lem’s beautiful prose rife with poetic imagery manages to defy two translations; his sense of action and tension are never questionable, and his pacing—and philosophical insight—is sublime. The novel keeps you thinking at all times, questioning
            Rheya’s reality, wondering the phantoms’ purpose, watching the devastation they level on Kelvin as he struggles to answer those questions. Plus, the guy has to deal with his memory of Rheya: is there be love after life, can he start anew?
            But they’re not questions with easy answers—even the one Kelvin comes up with at the end of the novel is complex and open-ended—and the questions themselves forecast a bleak outcome from the beginning.
        </p>
        <p><a class="link--fancy" href="#">Example Link</a></p>
        <p><a class="link--fancy" href="#">Example Link</a></p>
    </div>
    <aside class="feature__inset">
        <button class="button button--emphasis">
			Button demo
	</button>
    </aside>
</div>
<div class="feature {{ feature.type }} {{ feature.variant }} {{ layout_component }}">
  <div class="feature__text">
    {% block feature_test %}
      {% include '@headline-group' with { hg: feature.hg } %}
      {% include '@p' with { p:feature.p } %}
      {% for i in 1 .. feature.extralinks %}
        <p><a class="link--fancy" href="#">Example Link</a></p>
      {% endfor %}
       {% include '@button' with { button: feature.button } %}
    {% endblock %}
  </div>
  <aside class="feature__inset">
    {% block feature_inset %}
      {% include feature.inset %}
      {# {% include '@button' with { button: feature.button } %} #}
    {% endblock %}
  </aside>  
</div>
{
  "feature": {
    "type": null,
    "hg": {
      "tag": "h2",
      "headline": "Every feature block should have a headline"
    },
    "p": {
      "content": "At other points, Lem’s beautiful prose rife with poetic imagery manages to defy two translations; his sense of action and tension are never questionable, and his pacing—and philosophical insight—is sublime. The novel keeps you thinking at all times, questioning Rheya’s reality, wondering the phantoms’ purpose, watching the devastation they level on Kelvin as he struggles to answer those questions. Plus, the guy has to deal with his memory of Rheya: is there be love after life, can he start anew? But they’re not questions with easy answers—even the one Kelvin comes up with at the end of the novel is complex and open-ended—and the questions themselves forecast a bleak outcome from the beginning."
    },
    "inset": "@button",
    "extralinks": 2,
    "variant": "feature--dark-teal"
  },
  "described_links": {
    "items": [
      {
        "link": {
          "url": "http://www.example.com",
          "title": "Degree Programs & Certifications",
          "variant": "link--fancy"
        },
        "description": "A post-secondary certificate is a non-degree program offered by community colleges, four-year colleges and career schools. It represents completion of a specialized training program that focuses on the development of professional skills."
      },
      {
        "link": {
          "url": "http://www.example.com",
          "title": "Professional Volleyball @ NewCity",
          "variant": "link--fancy"
        }
      },
      {
        "link": {
          "url": "http://www.example.com",
          "title": "Anacoluthons in Literature",
          "variant": "link--fancy"
        },
        "description": "I will have such revenges on you both, that all the world shall — I will do such things, what they are, yet I know not…"
      },
      {
        "link": {
          "url": "http://www.example.com",
          "title": "Tell You About Anastrophes, We Will",
          "variant": "link--fancy"
        }
      }
    ]
  },
  "figure": {
    "media": "@image"
  },
  "p": {
    "content": "The caption on these needs to be really short"
  },
  "image": {
    "ratio": "1:1",
    "width": 600
  },
  "button": {
    "variant": "button--emphasis",
    "label": "Button demo"
  }
}
  • Content:
    .feature {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: rr-gridbase(6);
      @include rr-break-directive(l) {
        flex-flow: row nowrap;
      }
    
      .feature__text {
        flex: 0 1 100%;
        @include rr-break-directive(l) {
          flex: 0 1 65%;
        }
        .headline-group {
          .headline-group__head {
            // @include rr-font-compute(4xl, medium);
            font-size: rem(32px);
            line-height: rem(40px);
            font-weight: $rubik-heavier-weight;
          }
        }
        p {
          @include rr-font-compute(l, medium);
          &.intro {
            @include rr-font-compute(2xl, medium);
          }
        }
      }
    
      .feature__inset {
        flex: 0 1 100%;
        @include rr-break-directive(l) {
          flex: 0 1 35%;
          margin-left: rr-gridbase(6);
          // tbd for https://gitlab.com/newcity/davidson-drupal/issues/233
          // display: flex;
          // justify-content: flex-end;
          // flex-flow: row wrap;
          // align-items: flex-start;
          // align-content: flex-start;
        }
      }
    
      &.feature--flipped {
        @include rr-break-directive(l) {
          .feature__text {
            order: 2;
          }
          .feature__inset {
            order: 1;
            margin-left: 0;
            margin-right: rr-gridbase(6);
            display: block;
          }
        }
      }
    
      &.feature--light-teal,
      &.feature--dark-teal,
      &.feature--light-gray {
        padding: rr-gridbase(3);
        @include rr-break-directive(l) {
          padding: rr-gridbase(6);
    
          &.feature--captioned-media {
            $feature-media-offset: rem(40px);
            margin-top: $feature-media-offset + rem(30px);
            margin-right: $feature-media-offset;
            .feature__inset {
              figure {
                margin-top: -$feature-media-offset*2.2;
                margin-right: -$feature-media-offset*2.2;
                figcaption {
                  padding-right: rr-gridbase(3);
                  margin-right: $feature-media-offset;
                }
              }
            }
            &.feature--flipped {
              margin-right: 0;
              margin-left: $feature-media-offset;
              .feature__inset {
                figure {
                  margin-right: 0;
                  margin-left: -$feature-media-offset*2.2;
                  figcaption {
                    margin-right: 0;
                    padding-right: 0;
                    padding-left: rr-gridbase(3);
                    margin-left: $feature-media-offset;
                  }
                }
              }
            }
          }
        }
      }
      &.feature--light-teal {
        @include autoscheme($background-color: color(light-teal));
        figure {
          figcaption {
            border-bottom-color: color(davidson-white);
          }
        }
        .button {
          border-color: color(dark-teal);
          color: color(dark-teal);
          &:hover,
          &:active,
          &:focus {
            color: color(davidson-white);
            background-color: color(dark-teal);
          }
          &.button--emphasis {
            color: color(davidson-white);
            background-color: color(dark-teal);
            &:hover,
            &:active,
            &:focus {
              border-color: $medium-teal-contrast;
              color: color(davidson-white);
              background-color: $medium-teal-contrast;
            }
          }
        }
      }
      &.feature--dark-teal {
        @include autoscheme($background-color: color(dark-teal));
        a.link--fancy {
          &:hover,
          &:active {
            color: color(davidson-white);
            background-color: $fancy-on-dark-highlight;
            &:after {
              color: color(light-teal);
            }
          }
        }
        .button {
          border-color: color(davidson-white);
          color: color(davidson-white);
          &:hover,
          &:active,
          &:focus {
            color: color(dark-teal);
            background-color: color(davidson-white);
          }
          &.button--emphasis {
            border-color: $medium-teal-contrast;
            color: color(davidson-white);
            background-color: $medium-teal-contrast;
            &:hover,
            &:active,
            &:focus {
              border-color: color(davidson-white);
              color: color(dark-teal);
              background-color: color(davidson-white);
            }
          }
        }
      }
      &.feature--light-gray {
        @include autoscheme($background-color: color(gray-lightest));
      }
    
      &.feature--diamond {
        position: relative;
        &:after {
          content: '';
          position: absolute;
          z-index: 1;
          top: rem(20px);
          left: rem(-116px);
          width: rem(200px);
          height: rem(200px);
          background-image: image-url('bg-diamond.svg');
          background-repeat: no-repeat;
          background-size: contain;
        }
        .feature__text,
        .feature__inset {
          position: relative;
          z-index: 2;
        }
    
        .feature__text {
          .headline-group {
            .headline-group__head {
              @include rr-font-compute(4xl, medium);
            }
          }
          p {
            @include rr-font-compute(2xl, medium);
          }
        }
      }
    
      &.feature--inset-popout {
        @include rr-break-directive(l) {
          .feature__text {
            flex: 1 1 50%;
          }
          .feature__inset {
            flex: 0 1 50%;
          }
        }
        .feature__inset {
          img {
            @include block-top-stroke;
          }
        }
      }
    }
    
    body.homepage {
      .feature.feature--inset-popout {
        @include rr-break-directive(l) {
          .feature__inset {
            margin-left: 0;
            margin-top: rem(-90px);
            padding-left: rem(100px);
            @include faux-touch-edge($side: 'right');
            img {
              margin-top: rem(-60px);
            }
          }
        }
      }
    }
  • URL: /components/raw/feature/feature.scss
  • Filesystem Path: patterns/organisms/feature/feature.scss
  • Size: 5.4 KB

There are no notes for this item.