Skip to content

Commit

Permalink
Remove 50/50 hero's reliance on Jumbo hero styles
Browse files Browse the repository at this point in the history 
The 50/50 hero used to be a variation of the Jumbo hero, requiring the
element to have both classes (__jumbo and __50-50). It can now stand on
its own and only needs the latter modifier class. Its documentation has
been moved from the "Variations" to the "Types" section.
  • Loading branch information
@contolini
contolini committed Oct 27, 2021
1 parent 3bd9308 commit b0e984d
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 105 deletions.
160 changes: 79 additions & 81 deletions docs/pages/heroes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,79 +339,15 @@ variation_groups:
* Photo dimensions for large screens (exact): 1230px x 380px
* Photo dimensions for small screens: 600px (exact) x 338px (maximum)
variation_group_name: Types
variation_group_description: Heroes combine a heading, a small amount of
subheading text, and image. The content is vertically centered.
- variation_group_name: Variations
variations:
- 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_text">
<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
and 108-124 characters (two lines at 1230px)
following a two-line heading.
</p>
</div>
<div class="m-hero_image-wrapper">
<div class="m-hero_image"></div>
</div>
</div>
<style>
#hero2 {
background-color: #207676;
}
#hero2 .m-hero_image {
background-image:
url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png');
background-image: -webkit-image-set(
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
);
background-image: image-set(
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
);
padding-bottom: 41.4893617%;
}
@media screen and (min-width: 37.5625em) {
#hero2 .m-hero_image {
background-image:
url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png');
background-image: -webkit-image-set(
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
);
background-image: image-set(
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
);
padding-bottom: 41.4893617%;
}
}
</style>
</section>
variation_description: When using a dark background, add the `__knockout`
modifier to the hero to switch the text to white. For reference, see
this [example of a hero with knockout
text](https://www.consumerfinance.gov/data-research/consumer-credit-trends/).
- variation_is_deprecated: false
variation_name: 50/50 Jumbo Hero
variation_description: For a more visually-driven layout, 50/50 jumbo heroes
dedicate half their space to the image by adding the \`__50-50\`
modifier to the hero element. 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_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__jumbo m-hero__50-50"
id="example-jumbo-hero-50-50">
<section class="m-hero m-hero__50-50" id="example-hero-50-50">
<div class="m-hero_wrapper wrapper">
<div class="m-hero_text">
<h1 class="m-hero_heading">
Expand All @@ -426,7 +362,7 @@ variation_groups:
</div>
</div>
<style>
#example-jumbo-hero-50-50 .m-hero_image {
#example-hero-50-50 .m-hero_image {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
Expand All @@ -441,7 +377,7 @@ variation_groups:
}
@media screen and (min-width: 37.5625em) {
#example-jumbo-hero-50-50 .m-hero_wrapper {
#example-hero-50-50 .m-hero_wrapper {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
Expand All @@ -457,8 +393,7 @@ variation_groups:
</style>
</section>
variation_code_snippet_rendered: >-
<section class="m-hero m-hero__jumbo m-hero__50-50"
id="example-jumbo-hero-50-50">
<section class="m-hero m-hero__50-50" id="example-hero-50-50">
<div class="m-hero_wrapper wrapper">
<div class="m-hero_text">
<h1 class="m-hero_heading">
Expand All @@ -473,7 +408,7 @@ variation_groups:
</div>
</div>
<style>
#example-jumbo-hero-50-50 .m-hero_image {
#example-hero-50-50 .m-hero_image {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
Expand All @@ -488,7 +423,7 @@ variation_groups:
}
@media screen and (min-width: 37.5625em) {
#example-jumbo-hero-50-50 .m-hero_wrapper {
#example-hero-50-50 .m-hero_wrapper {
background-image:
url('/design-system/images/uploads/jumbo-hero-image.png');
background-image: -webkit-image-set(
Expand All @@ -503,20 +438,20 @@ variation_groups:
/* 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-jumbo-hero-50-50 .m-hero_wrapper {
#example-hero-50-50 .m-hero_wrapper {
border-top: 1px solid #b4b5b6;
min-height: 0;
}
#example-jumbo-hero-50-50 .m-hero_heading {
#example-hero-50-50 .m-hero_heading {
font-size: 2.125em;
}
#example-jumbo-hero-50-50 .m-hero_subheading {
#example-hero-50-50 .m-hero_subheading {
font-size: 1.375em;
}
}
</style>
</section>
variation_implementation: Jumbo heroes have a `@gray-40` border on the sides
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: >-
Expand All @@ -530,6 +465,69 @@ variation_groups:
* 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.
- variation_group_name: Variations
variations:
- 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_text">
<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
and 108-124 characters (two lines at 1230px)
following a two-line heading.
</p>
</div>
<div class="m-hero_image-wrapper">
<div class="m-hero_image"></div>
</div>
</div>
<style>
#hero2 {
background-color: #207676;
}
#hero2 .m-hero_image {
background-image:
url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png');
background-image: -webkit-image-set(
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
);
background-image: image-set(
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
);
padding-bottom: 41.4893617%;
}
@media screen and (min-width: 37.5625em) {
#hero2 .m-hero_image {
background-image:
url('https://cfpb.github.io/design-system/images/uploads/design_system_hero_example.png');
background-image: -webkit-image-set(
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
);
background-image: image-set(
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
);
padding-bottom: 41.4893617%;
}
}
</style>
</section>
variation_description: When using a dark background, add the `__knockout`
modifier to the hero to switch the text to white. For reference, see
this [example of a hero with knockout
text](https://www.consumerfinance.gov/data-research/consumer-credit-trends/).
variation_group_description: ""
use_cases: >-
### When to use
Expand Down
74 changes: 50 additions & 24 deletions packages/cfpb-layout/src/molecules/heroes.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,7 @@
&__jumbo {
background-color: @white;

.m-hero_subhead {
.lead-paragraph();
}
.u-jumbo-text();

.respond-to-max( @bp-xs-max, {
.m-hero_wrapper {
Expand All @@ -185,8 +183,8 @@
}

.m-hero_image-wrapper {
position: relative;
border-width: 0;
position: relative;
}
} );

Expand All @@ -200,51 +198,79 @@
.m-hero_image {
display: none;
}

.m-hero_subhead {
.heading-3();
}
} );
}

.respond-to-min( @bp-lg-min, {
&__50-50 {
background-color: @white;

.u-jumbo-text();

.respond-to-max( @bp-xs-max, {
.m-hero_wrapper {
// 290px ensures a comfortable height for heroes with
// only one-line headings that would otherwise be too short
min-height: unit( 290px / @base-font-size-px, em );
}
.m-hero_heading {
.superheading();
// Remove wrapper bottom padding.
padding-bottom: 0;
}
.m-hero_subhead {
.heading-2();

.m-hero_image-wrapper {
position: relative;
border-width: 0;
}
} );
}

&__50-50 {
.respond-to-min( @bp-sm-min, {
.m-hero_wrapper {
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%;
border: 1px solid @gray-40;
border-top: none;
}

.m-hero_text {
.grid_column( 6, 12 );
.m-hero_image {
display: none;
}

// Set the hero's text and image to 50%
.m-hero_text,
.m-hero_image-wrapper {
.grid_column( 6, 12 );
}
} );

.respond-to-min( @bp-lg-min, {
.m-hero_wrapper {
min-height: unit( 350px / @base-font-size-px, em );
// 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();
}
} );
}

0 comments on commit b0e984d

Please sign in to comment.