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 26, 2021
1 parent 572a44f commit 87904bb
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 24 deletions.
127 changes: 127 additions & 0 deletions docs/pages/heroes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,133 @@ variation_groups:
* 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 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 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 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 87904bb

Please sign in to comment.