code

Hgroup

Hgroup creates hero banners of standard sizes that scale up or down with screen sizes.

This is a page title

And a quirky subhead about why you should love us

Usage


        <section class="hgroup-m">
          <div class="valign-middle">
            <h1>This is a page title</h1>
            <h2 class="h-subhead">And a quirky subhead about why you should love us</h2>
          </div>
        </section>

Responsive Hgroup

Append any/all of -xs, -s, -m, and -l to make the banner respond at that screen size.

This is a page title

And a quirky subhead about why you should love us

Usage


        <section class="hgroup-xs-s-m-l">
          <div class="valign-middle">
            <h1>This is a page title</h1>
            <h2 class="h-subhead">And a quirky subhead about why you should love us</h2>
          </div>
        </section>

Heights

XS Screens S Screens M Screens L Screens
.xs 230px 230px 230px 230px
.xs-s 230px 400px 400px 400px
.xs-s-m 230px 400px 600px 600px
.xs-s-m-l 230px 400px 600px 800px
.s 400px 400px 400px 400px
.s-m 400px 400px 600px 600px
.s-m-l 400px 400px 600px 800px
.m 600px 600px 600px 600px
.m-l 600px 600px 800px 800px
.l 800px 800px 800px 800px

Alternate Hgroup

Alt Hgroup creates height classes standard sizes that be customized for each screen size. Just make the default hgroup the height you want applied on the smallest devices, and then override it (if desired) to change the height on larger devices.

This is a page title

Try resizing your window to see the height of this banner change for small, medium, and large screens.

.hgroup-200.hgroup-m400.hgroup-l600

Usage


        <section class="hgroup-s200 hgroup-m400 hgroup-l600 grey lighten-2">
          <div class="valign-middle">
            <h1 class="margin-top-0">This is a page title</h1>
            <h2 class="h-subhead">Try resizing your window to see the height of this banner change for small, medium, and large screens.</h2>
          </div>
        </section>
Standard banner heights
Height All screens XSmall screens
(and up)		 Medium screens
(and up)		 Large screens
(and up)
300px .hgroup-300 .hgroup-s300 .hgroup-m300 .hgroup-l300
530px .hgroup-530 .hgroup-s530 .hgroup-m530 .hgroup-l530
600px .hgroup-600 .hgroup-s600 .hgroup-m600 .hgroup-l600
All banner heights
Height All screens XSmall screens
(and up)		 Medium screens
(and up)		 Large screens
(and up)
200px .hgroup-200 .hgroup-s200 .hgroup-m200 .hgroup-l200
230px .hgroup-230 .hgroup-s230 .hgroup-m230 .hgroup-l230
300px .hgroup-300 .hgroup-s300 .hgroup-m300 .hgroup-l300
400px .hgroup-400 .hgroup-s400 .hgroup-m400 .hgroup-l400
500px .hgroup-500 .hgroup-s500 .hgroup-m500 .hgroup-l500
530px .hgroup-530 .hgroup-s530 .hgroup-m530 .hgroup-l530
600px .hgroup-600 .hgroup-s600 .hgroup-m600 .hgroup-l600
700px .hgroup-700 .hgroup-s700 .hgroup-m700 .hgroup-l700
800px .hgroup-800 .hgroup-s800 .hgroup-m800 .hgroup-l800
1000px .hgroup-1000 .hgroup-s1000 .hgroup-m1000 .hgroup-l1000
1200px .hgroup-1200 .hgroup-s1200 .hgroup-m1200 .hgroup-l1200
Auto* .hgroup-auto .hgroup-sauto .hgroup-mauto .hgroup-lauto

*Hgroup auto classes apply only to one screen size (as opposed to that size and up) and override the banner height and valign-middle properties inside it. Instead, the container grows to accommodate the content + 3em of padding on top and bottom.