Davidson Styleguide

Collection Grid: Fancy No Bg 

<div class="slab collection-grid collection-grid--fancy collection-grid--fancy--white">
    <div class="slab__wrapper">
        <div class="slab__header">
            <div class="section-intro">
                <h2 class="headline-group ">

                    <span class="headline-group__head">Headline for Both Collections</span>

                </h2>

            </div>
        </div>
        <div class="grid slab__content">
            <div class="collection  ">
                <h3 class="headline-group collection__headline">

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

                </h3>

                <div class="grid grid--xlarge">
                    <div class="teaser ">
                        <a href="http://www.example.com" class="block-link">
                            <div class="teaser__content">
                                <div class="content-meta">
                                    <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                                    <span class="taxonomy">Taxonomy Tag</span>

                                </div>
                                <div class="headline-group teaser__headline-group">

                                    <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

                                </div>

                            </div>
                        </a>
                    </div>
                    <div class="teaser ">
                        <a href="http://www.example.com" class="block-link">
                            <div class="teaser__content">
                                <div class="content-meta">
                                    <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                                    <span class="taxonomy">Taxonomy Tag</span>

                                </div>
                                <div class="headline-group teaser__headline-group">

                                    <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

                                </div>

                            </div>
                        </a>
                    </div>
                    <div class="teaser ">
                        <a href="http://www.example.com" class="block-link">
                            <div class="teaser__content">
                                <div class="content-meta">
                                    <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                                    <span class="taxonomy">Taxonomy Tag</span>

                                </div>
                                <div class="headline-group teaser__headline-group">

                                    <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

                                </div>

                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="collection  ">
                <h3 class="headline-group collection__headline">

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

                </h3>

                <div class="grid grid--xlarge">
                    <div class="teaser ">
                        <a href="http://www.example.com" class="block-link">
                            <div class="teaser__content">
                                <div class="content-meta">
                                    <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                                    <span class="taxonomy">Taxonomy Tag</span>

                                </div>
                                <div class="headline-group teaser__headline-group">

                                    <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

                                </div>

                            </div>
                        </a>
                    </div>
                    <div class="teaser ">
                        <a href="http://www.example.com" class="block-link">
                            <div class="teaser__content">
                                <div class="content-meta">
                                    <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                                    <span class="taxonomy">Taxonomy Tag</span>

                                </div>
                                <div class="headline-group teaser__headline-group">

                                    <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

                                </div>

                            </div>
                        </a>
                    </div>
                    <div class="teaser ">
                        <a href="http://www.example.com" class="block-link">
                            <div class="teaser__content">
                                <div class="content-meta">
                                    <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                                    <span class="taxonomy">Taxonomy Tag</span>

                                </div>
                                <div class="headline-group teaser__headline-group">

                                    <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

                                </div>

                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% if collection_grid is not empty %}
    {% embed '@slab' with { slab: collection_grid.slab } %}
        {% block slab_content %}
        <div class="grid slab__content">
            {% include '@collection' with { collection: collection_grid.collection_first } %}
            {% include '@collection' with { collection: collection_grid.collection_second } %}
        </div>
        {% endblock %}
    {% endembed %}
{% endif %}
 
{
  "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"
    }
  },
  "collection_grid": {
    "slab": {
      "classes": [
        "collection-grid",
        "collection-grid--fancy",
        "collection-grid--fancy--white"
      ],
      "section_intro": {
        "hg": {
          "headline": "Headline for Both Collections",
          "tag": "h2"
        },
        "p": null,
        "link": null
      }
    },
    "collection_first": {
      "hg": {
        "headline": "Optional Headline for Collection 1",
        "tag": "h3",
        "variant": "collection__headline"
      },
      "grid": {
        "variant": "grid--xlarge",
        "items": [
          {
            "pattern": "@teaser"
          },
          {
            "pattern": "@teaser"
          },
          {
            "pattern": "@teaser"
          }
        ]
      }
    },
    "collection_second": {
      "hg": {
        "headline": "Optional Headline for Collection 2",
        "tag": "h3",
        "variant": "collection__headline"
      },
      "grid": {
        "variant": "grid--xlarge",
        "items": [
          {
            "pattern": "@teaser"
          },
          {
            "pattern": "@teaser"
          },
          {
            "pattern": "@teaser"
          }
        ]
      }
    }
  }
}
  • Content: 
    .collection-grid {

  &.collection-grid--major-left {
    .grid.slab__content {
      display: block;
      overflow: visible;

      @include rr-break-directive(l) {
        display: grid;
        grid-gap: 4%;
        grid-template-columns: 2fr 1fr;
      }
    }

    .grid .collection {
      margin-bottom: 2rem;

      &:last-child {
        margin-bottom: 0;
      }

      @include rr-break-directive(l) {
        margin-bottom: 0;
      }
    }
  }

  &.collection-grid--fancy {
    .teaser--archive {
      .teaser__image {
        display: none;
      }
    }

    .grid.slab__content {
      @supports(display: grid) {
        grid-gap: 0;
        grid-template-columns: 1fr;

        @include rr-break-directive(l) {
          grid-template-columns: 65% 35%; // We can get away with percentages here because we're not using grid-gap
        }
      }

      .collection {
        &:first-child {
          .teaser {
            &:first-child {
              @include autoscheme($background-color: color(davidson-red));

              .teaser__content {
                padding: rr-gridbase(4);

                @include rr-break-directive(l) {
                  padding: rr-gridbase(6);
                }

                .headline-group {
                  .headline-group__head {
                    color: color(davidson-white);

                    &::after {
                      color: color(davidson-white);
                    }

                    @include rr-break-directive(m) {
                      @include rr-font-compute(3xl, medium);
                    }
                  }
                }

                .content-meta,
                .event-meta {

                  .taxonomy,
                  .daterange__time {
                    color: color(davidson-white);

                    &:nth-child(2) {
                      &::before {
                        background-color: color(davidson-white);
                      }
                    }
                  }
                }

                p {
                  @include rr-break-directive(m) {
                    @include rr-font-compute(xl, medium);
                  }
                }
              }

              .block-link {
                @include rr-break-directive(m) {
                  display: flex;
                }

                @include rr-break-directive(l) {
                  display: block;
                }

                &:hover,
                &:active {
                  background-color: transparent;
                  color: color(davidson-white);

                  .headline-group {
                    .headline-group__head {
                      background-color: $fancy-on-dark-highlight;
                    }
                  }
                }
              }
            }
          }
        }

        &:nth-child(2) {
          padding: rr-gridbase(4);
          background-color: color(gray-lightest);

          @include rr-break-directive(l) {
            padding: rr-gridbase(6);
          }
        }
      }
    }
  }
  // Customizations requested for the featured feed.
  &.collection-grid--fancy--white {
    .grid.slab__content {
      .collection:first-of-type {
        .content-meta {
          color: white;
        }
        .teaser.teaser--top-stroke .block-link .teaser__content {
          margin-top: 0;
        }
        .grid.grid--xlarge > * {
          margin: 0;
        }
      }
      .collection:nth-child(2) {
        background-color: unset;
      }
    }
  }
}

// change ratio for collection-grid--major-left when inside a sidebar page column
.with-sidebar.with-sidebar--major-right {
  .with-sidebar__main {
    .collection-grid.collection-grid--major-left {
      margin-bottom: rr-gridbase(4);
      padding-right: 0;
      padding-left: 0;

      @include rr-break-directive(l) {
        margin-bottom: 0;
      }

      .grid.slab__content {
        @include rr-break-directive(l) {
          grid-template-columns: 2fr 1fr;
        }
      }
    }
  }
}
  • URL: /components/raw/collection-grid/collection-grid.scss
  • Filesystem Path: patterns/organisms/collection-grid/collection-grid.scss
  • Size: 4 KB

There are no notes for this item.