Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate jumbo hero pattern from cf.gov, add new 50/50 hero, update hero grids #1299

Merged
merged 17 commits into from
Nov 2, 2021
Merged

Migrate jumbo hero pattern from cf.gov, add new 50/50 hero, update hero grids #1299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3c039e0
Migrate jumbo hero pattern from cf.gov to DS
contolini Sep 20, 2021
4aba686
Lint some thtings
contolini Sep 23, 2021
b5e71c6
Remove redundant heading class
contolini Sep 23, 2021
ba49024
Add jumbo hero 50/50 variation
contolini Sep 30, 2021
b6bc1a2
Added Jumbo hero to variations section
brandon-rusk Oct 11, 2021
ffeaabf
Fixed 50/50 variation implementation
brandon-rusk Oct 12, 2021
3c2f0e4
WIP
brandon-rusk Oct 13, 2021
a7c7617
Updated descriptions
brandon-rusk Oct 13, 2021
6a5372b
Added jumbo hero image
brandon-rusk Oct 13, 2021
125c2f2
Update jumbo hero variation
contolini Oct 14, 2021
ad0c175
Update hero documentation indentation, headings, comments
contolini Oct 25, 2021
3bd9308
Consolidate hero variables
contolini Oct 26, 2021
b0e984d
Remove 50/50 hero's reliance on Jumbo hero styles
contolini Oct 26, 2021
1c67936
Replace hero grid layout with CSS grid-based layout
contolini Oct 31, 2021
5c5ce1c
Clean up and simply legacy browser fallbacks
contolini Nov 2, 2021
b88fd65
Remove deprecated wrapper class from hero wrappers
contolini Nov 2, 2021
918156c
Merge branch 'main' into jumbo-hero
contolini Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/uploads/jumbo-hero-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/uploads/jumbo_hero_image_wide.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
272 changes: 251 additions & 21 deletions docs/pages/heroes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ variation_groups:
- variations:
- variation_code_snippet: >-
<section class="m-hero" id="hero1">
<div class="m-hero_wrapper wrapper">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<p class="h1 m-hero_heading">41 chars max for a one-line heading</p>
<h1 class="m-hero_heading">41 chars max for a one-line heading</h1>
<p class="m-hero_subhead">
This text has a recommended count of 165-186 characters
(three lines at 1230px) following a one-line heading
Expand All @@ -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%;
}
</style>
Expand Down Expand Up @@ -151,9 +148,9 @@ variation_groups:
details" link.
variation_code_snippet: >-
<section class="m-hero m-hero__overlay" id="hero4">
<div class="m-hero_wrapper wrapper">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<p class="h1 m-hero_heading">41 chars max for a one-line heading</p>
<h1 class="m-hero_heading">41 chars max for a one-line heading</h1>
<p class="m-hero_subhead">
This text has a recommended count of 165-186 characters
(three lines at 1230px) following a one-line heading
Expand All @@ -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%;
}

Expand All @@ -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');
}
}
</style>
Expand Down Expand Up @@ -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: >-
<section class="m-hero m-hero__jumbo" id="example-jumbo-hero">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<h1 class=m-hero_heading">
50 chars max for a two-line heading
</h1>
<p class="m-hero_subhead">
This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading.
</p>
</div>
<div class="m-hero_image-wrapper">
<div class="m-hero_image"></div>
</div>
</div>
<style>
#example-jumbo-hero .m-hero_image {
background-image:
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
padding-bottom: 41.6666667%;
}

@media screen and (min-width: 37.5625em) {
#example-jumbo-hero .m-hero_wrapper {
background-image:
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
}
}
</style>
</section>
variation_code_snippet_rendered: >-
<section class="m-hero m-hero__jumbo" id="example-jumbo-hero">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<h1 class="m-hero_heading">
50 chars max for a two-line heading
</h1>
<p class="m-hero_subhead">
This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading.
</p>
</div>
<div class="m-hero_image-wrapper">
<div class="m-hero_image"></div>
</div>
</div>
<style>
contolini marked this conversation as resolved.
Show resolved Hide resolved
#example-jumbo-hero .m-hero_image {
background-image:
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
padding-bottom: 41.6666667%;
}

@media screen and (min-width: 37.5625em) {
#example-jumbo-hero .m-hero_wrapper {
background-image:
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 1x,
url('/design-system/images/uploads/jumbo_hero_image_wide.jpeg') 2x
);
}
/* We're overriding some desktop jumbo hero CSS rules because the DS website
contolini marked this conversation as resolved.
Show resolved Hide resolved
constrains the example jumbo hero into a narrow column, causing the
desktop CSS rules to be rendered against a narrow, non-desktop-sized hero. */
#example-jumbo-hero .m-hero_wrapper {
min-height: 0;
}
#example-jumbo-hero .m-hero_heading {
font-size: 2.125em;
}
#example-jumbo-hero .m-hero_subheading {
font-size: 1.375em;
}
}
</style>
</section>
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: >-
<section class="m-hero m-hero__50-50" id="example-hero-50-50">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<h1 class="m-hero_heading">
50 chars max for a two-line heading
</h1>
<p class="m-hero_subhead">
This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading.
</p>
</div>
<div class="m-hero_image-wrapper">
<div class="m-hero_image"></div>
</div>
</div>
<style>
#example-hero-50-50 .m-hero_image {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
padding-bottom: 41.6666667%;
}

@media screen and (min-width: 37.5625em) {
#example-hero-50-50 .m-hero_wrapper {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
}
}
</style>
</section>
variation_code_snippet_rendered: >-
<section class="m-hero m-hero__50-50" id="example-hero-50-50">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<h1 class="m-hero_heading">
50 chars max for a two-line heading
</h1>
<p class="m-hero_subhead">
This text has a recommended count of 140-175 characters (four lines at 1230px) following a two- or three-line heading.
</p>
</div>
<div class="m-hero_image-wrapper">
<div class="m-hero_image"></div>
</div>
</div>
<style>
#example-hero-50-50 .m-hero_image {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
padding-bottom: 41.6666667%;
}

@media screen and (min-width: 37.5625em) {
#example-hero-50-50 .m-hero_wrapper {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
background-image: image-set(
url('/design-system/images/uploads/jumbo-hero-image.png') 1x,
url('/design-system/images/uploads/jumbo-hero-image.png') 2x
);
}
/* We're overriding some desktop jumbo hero CSS rules because the DS website
constrains the example jumbo hero into a narrow column, causing the
desktop CSS rules to be rendered against a narrow, non-desktop-sized hero. */
#example-hero-50-50 .m-hero_wrapper {
border-top: 1px solid #b4b5b6;
min-height: 0;
}
#example-hero-50-50 .m-hero_heading {
font-size: 2.125em;
}
#example-hero-50-50 .m-hero_subheading {
font-size: 1.375em;
}
}
</style>
</section>
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.
Expand All @@ -238,9 +474,9 @@ variation_groups:
- variation_name: Hero with knockout text
variation_code_snippet: >-
<section class="m-hero m-hero__knockout" id="hero2">
<div class="m-hero_wrapper wrapper">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<p class="h1 m-hero_heading">Max of 41 chars for a one-line heading</p>
<h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
<p class="m-hero_subhead">
This text has a recommended count of 165-186 characters
(three lines at 1230px) following a one-line heading
Expand Down Expand Up @@ -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%;
}

Expand All @@ -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%;
}
}
Expand Down
8 changes: 0 additions & 8 deletions packages/cfpb-layout/src/cfpb-layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
//
Expand Down
Loading