diff --git a/docs/images/uploads/jumbo-hero-image.png b/docs/images/uploads/jumbo-hero-image.png new file mode 100644 index 0000000000..7ca87a8704 Binary files /dev/null and b/docs/images/uploads/jumbo-hero-image.png differ diff --git a/docs/images/uploads/jumbo_hero_image_wide.jpeg b/docs/images/uploads/jumbo_hero_image_wide.jpeg new file mode 100644 index 0000000000..4ee0f24df7 Binary files /dev/null and b/docs/images/uploads/jumbo_hero_image_wide.jpeg differ diff --git a/docs/pages/heroes.md b/docs/pages/heroes.md index d9af243e64..fd1fbea65c 100644 --- a/docs/pages/heroes.md +++ b/docs/pages/heroes.md @@ -13,9 +13,9 @@ variation_groups: - variations: - variation_code_snippet: >-
-
+
-

41 chars max for a one-line heading

+

41 chars max for a one-line heading

This text has a recommended count of 165-186 characters (three lines at 1230px) following a one-line heading @@ -42,9 +42,6 @@ variation_groups: url('https://cfpb.github.io/design-system/images/uploads/hero_illustration_example_keys.png') 1x, url('https://cfpb.github.io/design-system/images/uploads/hero_illustration_example_keys.png') 2x ); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( - src='https://cfpb.github.io/design-system/images/uploads/hero_illustration_example_keys.png', - sizingMethod='scale'); padding-bottom: 41.4893617%; } @@ -151,9 +148,9 @@ variation_groups: details" link. variation_code_snippet: >-

-
+
-

41 chars max for a one-line heading

+

41 chars max for a one-line heading

This text has a recommended count of 165-186 characters (three lines at 1230px) following a one-line heading @@ -177,9 +174,6 @@ variation_groups: url('https://dummyimage.com/600x250/addc91/101820') 1x, url('https://dummyimage.com/1200x500/addc91/101820') 2x ); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( - src='https://dummyimage.com/600x250/addc91/101820', - sizingMethod='scale'); padding-bottom: 41.6666667%; } @@ -195,9 +189,6 @@ variation_groups: url('http://files.consumerfinance.gov/f/images/PC_hero.original.jpg') 1x, url('http://files.consumerfinance.gov/f/images/PC_hero.original.jpg') 2x ); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( - src='http://files.consumerfinance.gov/f/images/PC_hero.original.jpg', - sizingMethod='scale'); } } @@ -230,6 +221,251 @@ variation_groups: variation_implementation: "It’s best to avoid a non-button call to action in these, as it’s unlikely that the Pacific Blue will have accessible contrast with a non-white (or light gray) background. " + - variation_is_deprecated: false + variation_name: Jumbo hero + variation_description: Jumbo heroes have supersized headings on large screens + and standard-sized headings on smaller screens. The image visibly + fills the right-most third of the element while using a gradient to + seamlessly fade behind the text. + variation_code_snippet: >- +

+
+
+

+ 50 chars max for a two-line heading +

+

+ This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading. +

+
+
+
+
+
+ +
+ variation_code_snippet_rendered: >- +
+
+
+

+ 50 chars max for a two-line heading +

+

+ This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading. +

+
+
+
+
+
+ +
+ variation_specs: >- + * Two images must be created, one for large and one for small screens. + + * Type contrast ratios cannot be mathematically determined for photos, so special care should be paid when selecting these images. + + * Photo dimensions for large screens (exact): 1230px x 380px + + * Photo dimensions for small screens: 600px (exact) x 338px (maximum) + - variation_is_deprecated: false + variation_description: For more visually-driven layouts, 50/50 heroes have + supersized headings while also dedicating half their space to the + image. The image takes up the full right half of the hero and bleeds + to the top and bottom edges on larger screens. On smaller screens and + constrained layouts, white space will appear above and below the image + in order to preserve its dimensions. + variation_code_snippet: >- +
+
+
+

+ 50 chars max for a two-line heading +

+

+ This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading. +

+
+
+
+
+
+ +
+ variation_code_snippet_rendered: >- +
+
+
+

+ 50 chars max for a two-line heading +

+

+ This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading. +

+
+
+
+
+
+ +
+ variation_implementation: 50/50 heroes have a 1px `@gray-40` border on the sides + because, unlike standard heroes, their background does not + horizontally bleed to the edges of the screen. + variation_specs: >- + * Two images may be created, one for large and one for small screens, + or the same large image may be used on mobile if preferred. + + * Large and small screen images should contain the same elements but can differ compositionally. + + * Type contrast ratios cannot be mathematically determined for photos, so special care should be paid when selecting these images. + + * Photo dimensions for large screens (exact): 755px x 575px + + * Photo dimensions for small screens: 755px (exact) x 575px (maximum) + variation_name: 50/50 hero variation_group_name: Types variation_group_description: Heroes combine a heading, a small amount of subheading text, and image. The content is vertically centered. @@ -238,9 +474,9 @@ variation_groups: - variation_name: Hero with knockout text variation_code_snippet: >-
-
+
-

Max of 41 chars for a one-line heading

+

Max of 41 chars for a one-line heading

This text has a recommended count of 165-186 characters (three lines at 1230px) following a one-line heading @@ -268,9 +504,6 @@ variation_groups: url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png') 1x, url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png') 2x ); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( - src='https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png', - sizingMethod='scale'); padding-bottom: 41.4893617%; } @@ -286,9 +519,6 @@ variation_groups: url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png') 1x, url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png') 2x ); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( - src='https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png', - sizingMethod='scale'); padding-bottom: 41.4893617%; } } diff --git a/packages/cfpb-layout/src/cfpb-layout.less b/packages/cfpb-layout/src/cfpb-layout.less index 650fc2c7e9..33e93e1464 100644 --- a/packages/cfpb-layout/src/cfpb-layout.less +++ b/packages/cfpb-layout/src/cfpb-layout.less @@ -51,14 +51,6 @@ // .grid_column__top-divider @grid_column__left-divider: @block__border; -// Hero variables - -@hero-desktop-height: 285px; - -@hero-bg: @block__bg; -@hero-knockout-bg: @gray; -@hero-knockout-text: @white; - // // Content layouts // diff --git a/packages/cfpb-layout/src/molecules/heroes.less b/packages/cfpb-layout/src/molecules/heroes.less index 83a7032a48..b4855e2f5b 100644 --- a/packages/cfpb-layout/src/molecules/heroes.less +++ b/packages/cfpb-layout/src/molecules/heroes.less @@ -1,17 +1,28 @@ +// Hero variables + +@hero-desktop-height: 285px; + +// Hero molecule + .m-hero { - background-color: @hero-bg; + background-color: @gray-5; &_wrapper { - padding-top: unit( @grid_gutter-width / @base-font-size-px, em ); - padding-bottom: unit( @grid_gutter-width / @base-font-size-px, em ); + // Manually enable CSS grid for IE. IE's grid implementation differs + // slightly from the spec so we manually enable it per component + // instead of using autoprefixer to enable it for the entire site. + display: -ms-grid; + display: grid; + max-width: ( @grid_wrapper-width - @grid_gutter-width ); + margin: 0 auto; + padding-top: @grid_gutter-width; + padding-bottom: @grid_gutter-width; .respond-to-min( @bp-sm-min, { - // IE specific fix. - display: table; - - @supports( display: flex ) { - display: flex; - } + -ms-grid-columns: 7fr 5fr; + grid-template-columns: 7fr 5fr; + padding-right: ( @grid_gutter-width / 2); + padding-left: ( @grid_gutter-width / 2); min-height: @hero-desktop-height - ( @grid_gutter-width * 2 ); } ); @@ -24,19 +35,11 @@ } &_text { - .grid_column( 1, 1 ); + padding-right: ( @grid_gutter-width / 2 ); + padding-left: ( @grid_gutter-width / 2 ); .respond-to-min( @bp-sm-min, { - .grid_column( 7, 12 ); - - // IE specific fix - display: table-cell; - vertical-align: middle; - - @supports ( display: flex ) { - display: block; - margin: auto; - } + margin: auto; } ); } @@ -60,21 +63,16 @@ } &_image-wrapper { - .grid_column( 1, 1 ); - + box-sizing: border-box; overflow: hidden; .respond-to-min( @bp-sm-min, { - .grid_column( 5, 12 ); + padding-right: ( @grid_gutter-width / 2 ); + padding-left: ( @grid_gutter-width / 2 ); - // IE specific fix. - display: table-cell; - vertical-align: middle; - - @supports ( display: flex ) { - display: block; - margin: auto; - } + // Vertically center hero images + display: flex; + align-items: center; } ); .respond-to-max( @bp-xs-max, { @@ -83,37 +81,34 @@ } &_image { - .u-flexible-container-mixin( 16, 9 ); - background-position: center; background-repeat: no-repeat; background-size: contain; + + width: 100%; + + // Progressive enhancement for legacy browsers. + // Instead of writing fallbacks for the behavior of each type of + // hero image, we hide the hero image in legacy browsers. + display: none; + + @supports ( display: grid ) { + display: block; + } } &__knockout { - background-color: @hero-knockout-bg; - color: @hero-knockout-text; + background-color: @gray; + color: @white; } &__bleeding { .respond-to-min( @bp-sm-min, { - .m-hero_wrapper { - position: relative; - } - .m-hero_image-wrapper { + width: 100%; margin-top: unit( @grid_gutter-width / @base-font-size-px, em ) * -1; margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em ) * -1; - - // IE specific fix. - position: absolute; - height: 100%; - - @supports ( display: flex ) { - position: relative; - height: initial; - } } .m-hero_image { @@ -121,7 +116,6 @@ padding-bottom: 0 !important; height: 100%; width: 100%; - position: absolute; background-size: cover; } } ); @@ -142,26 +136,100 @@ } .respond-to-max( @bp-xs-max, { - .m-hero_wrapper { // Overwrite the image that is set in the markup because // we are showing the image container below instead. background-image: none !important; + } + } ); - // Remove wrapper bottom padding. - padding-bottom: 0; + .respond-to-min( @bp-sm-min, { + .m-hero_image { + display: none; } + } ); + } - .m-hero_image-wrapper { - position: relative; - border-width: 0; + &__jumbo { + background-color: @white; + + .u-jumbo-text(); + + .respond-to-min( @bp-sm-min, { + .m-hero_wrapper { + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + } + + .m-hero_image { + display: none; + } + } ); + + .respond-to-max( @bp-xs-max, { + .m-hero_wrapper { + // Keep hero image flush with container on mobile + padding-bottom: 0; } } ); + } + + &__50-50 { + background-color: @white; + + .u-jumbo-text(); .respond-to-min( @bp-sm-min, { + .m-hero_wrapper { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + + border: 1px solid @gray-40; + border-top: none; + // Position the hero image all the way to the right + background-position: 100% center; + background-repeat: no-repeat; + background-size: 50%; + } + .m-hero_image { display: none; } } ); + + .respond-to-min( @bp-lg-min, { + .m-hero_wrapper { + // Enlarge the 50/50 height on large screens to maximize the image size + min-height: @hero-desktop-height + ( @grid_gutter-width * 2 ); + } + } ); + } + +} + +// Jumbo hero text mixin + +.u-jumbo-text() { + .m-hero_subhead { + .lead-paragraph(); } + + .respond-to-min( @bp-sm-min, { + .m-hero_subhead { + .heading-3(); + } + } ); + + .respond-to-min( @bp-lg-min, { + .m-hero_wrapper { + min-height: @hero-desktop-height; + } + .m-hero_heading { + .superheading(); + } + .m-hero_subhead { + .heading-2(); + } + } ); }