Davidson Styleguide

Course Teaser: Default 

<div class="course-teaser ">
    <div class="course-teaser__content">
        <h3 class="headline-group ">

            <span class="headline-group__head"><a href="http://www.example.com"  class="">Course 123</a></span>
            <span class="headline-group__sub">Long Title of Course Goes Here</span>
        </h3>

        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
    </div>
</div>
 
{% if course_teaser is not empty %}
<div class="course-teaser {{ course_teaser.variant }}">
  <div class="course-teaser__content">
    {% block course_teaser_content %}
      {% include '@headline-group' with { hg: course_teaser.hg } %}
      {% include '@p' with { p: course_teaser.p } %}
    {% endblock %}
  </div>  
</div>
{% endif %}
 
{
  "course_teaser": {
    "hg": {
      "tag": "h3",
      "headline": {
        "url": "http://www.example.com",
        "title": "Course 123"
      },
      "sub": "Long Title of Course Goes Here"
    },
    "p": {
      "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
    }
  }
}
  • Content: 
    .course-teaser {
    @include block-top-stroke;
    padding: rr-gridbase(4) 0;
    border-bottom: color(gray-medium-light) 1px solid;

    .headline-group {
        margin-bottom: rr-gridbase(2);
        .headline-group__head {
            margin-bottom: rr-gridbase(2);
            display: block;
            a {
                @include link-fancy;
            }
        }
        .headline-group__sub {
            font-weight: $rubik-heavier-weight;
        }
    }

    p {
        &:last-child {
          margin-bottom: 0;
        }
      }
}
  • URL: /components/raw/course-teaser/course-teaser.scss
  • Filesystem Path: patterns/molecules/blocks/course-teaser/course-teaser.scss
  • Size: 550 Bytes

Special teaser for promoting a course.