<div class="collection  ">
    <h2 class="headline-group collection__headline">

        <span class="headline-group__head">Collection Headline</span>

    </h2>

    <div class="grid grid--large">
        <div class="fast-fact  ">
            <div class="fast-fact__stat">
                <div class="headline-group ">

                    <span class="headline-group__head">50 ways</span>

                </div>

            </div>
            <div class="fast-fact__description">
                <p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
            </div>
        </div>
        <div class="fast-fact  ">
            <div class="fast-fact__stat">
                <div class="headline-group ">

                    <span class="headline-group__head">50 ways</span>

                </div>

            </div>
            <div class="fast-fact__description">
                <p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
            </div>
        </div>
        <div class="fast-fact  ">
            <div class="fast-fact__stat">
                <div class="headline-group ">

                    <span class="headline-group__head">50 ways</span>

                </div>

            </div>
            <div class="fast-fact__description">
                <p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
            </div>
        </div>
    </div>
</div>
<div class="collection {{ collection.variant }} {{ layout_component }}">
  {% include '@headline-group' with { hg: collection.hg } %}
  {% if collection.p %}
    <div class="collection__description">
      {% include '@p' with { p: collection.p } %}
    </div> 
  {% endif %}
  {% include "@grid" with { grid: collection.grid } %}
  {% if collection.button %}
  <div class="collection__button">
    {% include '@button' with { button: collection.button } %}
  </div>
  {% endif %}
</div>
{
  "fast_fact": {
    "hg": {
      "tag": "div",
      "headline": "50 ways"
    },
    "content": "<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>"
  },
  "teaser": {
    "hg": {
      "headline": "This the teaser headline, which can often be somewhat long, detailed, and wordy",
      "tag": "div",
      "variant": "teaser__headline-group"
    },
    "content_meta": {
      "taxonomy": {
        "tag": "Taxonomy Tag"
      },
      "datetime": {
        "date": "now",
        "format": "F d, Y",
        "machine": "Y-m-d"
      }
    },
    "link": {
      "url": "http://www.example.com",
      "title": "Teaser"
    }
  },
  "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."
    }
  },
  "pullquote": {
    "pattern": "@p",
    "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."
    },
    "cite": {
      "citation": "Edgar Rice Burroughs, <em>Princess of Mars</em>"
    }
  },
  "cta": {
    "hg": {
      "tag": "h3",
      "headline": "Call to Action"
    },
    "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."
    },
    "icon_link": {
      "variant": "icon-link--hidden-label"
    },
    "icon": {
      "glyph": "ic--diamond-arrow",
      "label": "Useful action label for link"
    },
    "link": {
      "url": "https://goo.gl/maps/6EnbowefKn62"
    }
  },
  "program_card": {
    "hg": {
      "tag": "h3",
      "headline": "Program Title"
    },
    "link": {
      "url": "http://www.example.com"
    },
    "availability": [
      {
        "program_icon": {
          "category": "Major",
          "category_short": "M",
          "variant": "program-icon--major"
        }
      },
      {
        "program_icon": {
          "category": "Minor",
          "category_short": "m",
          "variant": "program-icon--minor"
        }
      },
      {
        "program_icon": {
          "category": "Pre-professional Program",
          "category_short": "P",
          "variant": "program-icon--pre-professional"
        }
      }
    ]
  },
  "collection": {
    "hg": {
      "headline": "Collection Headline",
      "tag": "h2",
      "variant": "collection__headline"
    },
    "grid": {
      "items": [
        {
          "pattern": "@fast-fact"
        },
        {
          "pattern": "@fast-fact"
        },
        {
          "pattern": "@fast-fact",
          "cell_variant": "span-two"
        }
      ],
      "variant": "grid--large"
    }
  }
}
  • Content:
    .collection {
      .headline-group.collection__headline {
        margin-bottom: rr-gridbase(4);
      }
    
      .collection__description {
        p {
          @include rr-font-compute(xl, medium);
        }
      }
    
      & > .grid {
        overflow: visible;
      }
    
      .collection__button {
        margin-top: rr-gridbase(4);
      }
    
      &.collection--center-button {
        .collection__button {
          display: flex;
          justify-content: center;
        }
      }
    
      &.collection--archive {
        margin-bottom: rr-gridbase(4);
    
        .collection__button {
          button,
          .button {
            margin-bottom: rr-gridbase(4);
          }
        }
      }
    
      &.collection--divide-horizontal {
        & > .grid {
          > * {
            border-bottom: color(gray-medium-light) rem(1px) solid;
          }
    
          &.grid.grid--xlarge {
            > :first-child {
              padding-top: rr-gridbase(4);
              border-top: color(gray-medium-light) rem(1px) solid;
            }
          }
        }
      }
    
      &.collection--teaser-card {
        .teaser {
          @include teaser-card;
        }
      }
    
      &.collection--teaser-event-card {
        .teaser {
          @include teaser-event-card;
        }
      }
    }
    
  • URL: /components/raw/collection/collection.scss
  • Filesystem Path: patterns/organisms/collection/collection.scss
  • Size: 1.1 KB

There are no notes for this item.