diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index d245bc2..0000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,5 +0,0 @@ -### Description - -Please include a summary of the change and which issue is fixed. Please also include relevant motivation, context, and sources of information or recipes. - -Fixes # diff --git a/sass/_uswds-base.scss b/sass/_uswds-base.scss index df778f8..823860e 100644 --- a/sass/_uswds-base.scss +++ b/sass/_uswds-base.scss @@ -18,3 +18,76 @@ ref: https://designsystem.digital.gov/components/packages h1 { color: unset; } + +.pattern-info-section { + + @include u-padding-x(2); + + background-color: color($theme-color-base-darkest) !important; + + .pattern-info-container { + + @include u-padding-x(6); + @include u-padding-y(4); + max-width: 800px; + margin: auto; + + border: 5px; + border-style: solid; + border-radius: 1rem; + border-color: color($theme-color-base-darker); + + @include at-media-max("mobile-lg") { + @include u-padding(2); + } + + h2, + h3, + h4 { + margin-top: 2rem; + margin-bottom: 1rem; + color: color($theme-color-base-lighter); + opacity: 80% !important; + } + + h2 { + @include u-font-size("sans", 13); + color: rgba(230, 199, 76); + line-height: 0.9em; + + @include at-media-max("mobile-lg") { + @include u-font-size("sans", 12); + } + } + + h3 { + @include u-font-size("sans", 10); + + @include at-media-max("mobile-lg") { + @include u-font-size("sans", 8); + } + } + + h4 { + @include u-font-size("sans", 8); + + @include at-media-max("mobile-lg") { + @include u-font-size("sans", 7); + } + } + + .features { + + p, + ol, + li { + color: color($theme-color-base-lighter); + opacity: 70%; + } + + .usa-list li { + max-width: unset; + } + } + } +} diff --git a/src/app/pages/card-catalog/catalog.component.html b/src/app/pages/card-catalog/catalog.component.html index 070b908..5c6bb28 100644 --- a/src/app/pages/card-catalog/catalog.component.html +++ b/src/app/pages/card-catalog/catalog.component.html @@ -12,19 +12,19 @@ - +

Card catalog

A card catalog using the U.S. Web Design System Card component with fixed image aspect ratio, - consistent section sizing, full-surface clickability (to replace the button), a hover effect, and "see more" - pagination. + href="https://designsystem.digital.gov/components/card/" target="_blank">Card component + with "see more" pagination. Learn more about our modifications at the bottom of this page.

- -
- + + +
+ +
+ +

When to use this design pattern

+ +
+ +

Modifications to the card

+ +

+ Use this card approach when you want consistent Card size proportions and + alignment of its elements when sizes for images, card titles, and descriptions vary. +

+ +
    +
  • Card image box uses a fixed aspect ratio to ensure a consistent size.
    • +
  • Card title and summary sections are fixed to 2 and 3 lines to ensure a consistent size. We limited the max + allowable raw text, so overflow is rare. Ellipses indicate overflows ...
    • +
  • Full card is clickable to maximize the size of target surface (we also removed the button).
    • +
  • A hover effect is applied to emphasize and clarify clickability and targeting.
    • +
  • Images ease in on load to reduce the visual "pop" that occurs on late arrival.
    • +
+ +

Implementation of "see more" pagination

+ +

+ Use this alternate pagination approach when you want to see more content without the large page + shift that you'd get from classic numbered Pagination. +

+ +
    +
  • "See more" and "Show all" pagination uses Javascript to add the next page(s) + data to the card collection.
    • +
  • Smooth scroll to position first new items added to the card collection.
    • +
  • Lazy load images so only nearby images download and render.
    • +
+
+ + + +
diff --git a/src/app/pages/card-catalog/catalog.component.scss b/src/app/pages/card-catalog/catalog.component.scss index fcd2efe..75dd2e5 100644 --- a/src/app/pages/card-catalog/catalog.component.scss +++ b/src/app/pages/card-catalog/catalog.component.scss @@ -7,89 +7,78 @@ @forward "usa-button-group"; .catalog-section { + @include u-padding-top(0); - @include u-padding-bottom(2); - min-height: 100v; // ensures no CLS -} -.usa-card { - a.usa-card__container { - text-decoration: none; - border-color: color($theme-color-base-lighter); + .usa-card { - // hover effect - &:hover { - .usa-card__header { - text-decoration: underline; - text-decoration-color: color($theme-color-base-light); - } + a.usa-card__container { + text-decoration: none; + border-color: color($theme-color-base-lighter); + + // hover effect + &:hover { + + .usa-card__header { + text-decoration: underline; + text-decoration-color: color($theme-color-base-light); + } - box-shadow: - 0px 5px 5px -3px color($theme-color-base-light, 0.2), + box-shadow: 0px 5px 5px -3px color($theme-color-base-light, 0.2), 0px 8px 8px 1px color($theme-color-base-light, 0.14), 0px 3px 14px 2px color($theme-color-base-light, 0.12); - } + } - // click effect - &:active { - background-color: color($theme-color-base-lighter); + // click effect + &:active { - box-shadow: - 0px 15px 15px -3px color($theme-color-base-light, 0.2), - 0px 24px 30px 1px color($theme-color-base-light, 0.14), - 0px 9px 40px 2px color($theme-color-base-light, 0.12); - } - - // maintain image box size proportion - .usa-card__img { - aspect-ratio: 600/315; - background-color: color($theme-color-base-lighter); - } + background-color: color($theme-color-base-lighter); - // when above tablet size, - // truncate the title and description - @include at-media("tablet") { - .usa-card__heading { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - line-height: 2.25ex; - height: 4.5ex; - overflow: hidden; + box-shadow: + 0px 15px 15px -3px color($theme-color-base-light, 0.2), + 0px 24px 30px 1px color($theme-color-base-light, 0.14), + 0px 9px 40px 2px color($theme-color-base-light, 0.12); } - .usa-card__body p { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - line-height: 2.8ex; - height: 8.4ex; - overflow: hidden; + // maintain image box size proportion + .usa-card__img { + + aspect-ratio: 600/315; + background-color: color($theme-color-base-lighter); } - } - } -} -// button groups at bottom of page -.usa-button-group { - @include u-flex("justify-center"); -} + // when above tablet size, + // truncate the title and description + @include at-media("tablet") { -.pattern-info-section { - @include u-padding-y(2); + .usa-card__heading { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + line-height: 2.25ex; + height: 4.5ex; + overflow: hidden; + } - .usa-button-group__item { - @include u-margin-x(1); + .usa-card__body p { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + line-height: 2.8ex; + height: 8.4ex; + overflow: hidden; + } + } + } } - .usa-button--unstyled { - @include at-media-max("mobile-lg") { - text-align: center; - min-height: 24px !important; - } + // button groups at bottom of page + .usa-button-group { + @include u-flex("justify-center"); } } + // fade in images after loading. // we're partly doing this since we're using a 3rd-party image source // that does not have a performant caching approach diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 6b2c22b..bb2e4d0 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -9,17 +9,17 @@ @include u-padding-top(4); @include u-padding-bottom(2); min-height: 75vh; -} - -.subtitle { - @include u-font-size('sans', 9); - font-weight: 400; - color: color($theme-color-base-light); - line-height: 1.2em; - margin-top: 0.25em; - display: block; - @include at-media-max("mobile-lg") { - @include u-font-size('sans', 7); + .subtitle { + @include u-font-size('sans', 9); + font-weight: 400; + color: color($theme-color-base-light); + line-height: 1.2em; + margin-top: 0.25em; + display: block; + + @include at-media-max("mobile-lg") { + @include u-font-size('sans', 7); + } } }