Modals

Small

Small factor modal. Fixed width, Relative height.

View Source 
1
2
3
4
5

<modal id="small_modal"><modal-body>
    <div class="text-center t-small-section-hdr u-space-bottom-6">
      Want to check out the other available boxes?
    </div>
    <button class="btn btn--primary u-space-bottom-3" type="button">Yes, of course</button><button class="btn btn--secondary" data-dismiss="modal" type="button">No</button></modal-body></modal>

Large

Large modal. Fixed height. Relative width on SM/MD, Fixed width on LG.

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<modal default-close-button="false" id="large_modal" mode="large"><modal-header>
    <div class="c-havelock-dark t-small-body-sans-static">
      <a class="text-left" href="#">View full product details</a>
    </div>
  </modal-header><modal-body>
    <div class="row">
      <div class="col--lg-6-of-12 col--md-4-of-8">
        <div class="u-aspect-ratio-3x2-sm u-aspect-ratio-1x1 c-bg-gray-dark u-space-bottom-4-sm"></div>
      </div>
      <div class="col--lg-6-of-12 col--md-4-of-8">
        <div class="t-small-section-hdr u-space-bottom-6">
          Watchman Beanie, Copper
        </div>
        <div class="t-meta-section-hdr-static u-space-bottom-3">
          Description & Details
        </div>
        <div class="t-body-sans-static">
          Keep warm while staying cool. The acrylic material used to make this go-with-anything beanie, keeps your head warm while also wicking moisture away so you won't get sweaty. Wear it cuffed or unrolled, and with pretty much anything you own.
        </div>
      </div>
    </div>
  </modal-body><modal-footer>
    <div class="row">
      <div class="col--lg-6-of-12 col--lg-push-3-of-12 col--md-4-of-8 pull-none--md centered--md">
        <button class="btn btn--primary u-height-9" type="button">Apply</button>
      </div>
    </div>
  </modal-footer></modal>
View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<modal id="large_modal_grid" mode="large"><modal-header>
    <div class="c-havelock-dark">
      <a class="t-small-body-sans-static text-left" href="#">View full product details</a>
    </div>
  </modal-header><modal-body><div class="row">
      <div class="col--lg-6-of-12 col--md-4-of-8">
        <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4"></div>
        <div class="row hidden-sm">
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 visible-lg">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 visible-lg">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
        </div>
      </div>
      <div class="col--lg-6-of-12 col--md-4-of-8 col--sm-2-of-4">
        <div class="row">
          <div class="col--lg-3-of-6 col--md-2-of-4 col--sm-1-of-2">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-3-of-6 col--md-2-of-4 col--sm-1-of-2">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
        </div>
        <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-top-4-lg u-space-top-4-md"></div>
      </div>
      <div class="col--sm-2-of-4 visible-sm">
        <div class="u-aspect-ratio-3x2 c-bg-barely-white"></div>
      </div>
    </div></modal-body><modal-footer>
    <div class="row">
      <div class="col--lg-6-of-12 col--lg-push-3-of-12 col--md-4-of-8 pull-none--md centered--md">
        <button class="btn btn--primary u-height-9" type="button">Apply</button>
      </div>
    </div>
  </modal-footer></modal>

Fullscreen

Fullscreen modal. Covers the entire viewport.

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<modal id="fullscreen_modal" mode="fullscreen"><modal-header>
    <div class="t-small-section-hdr u-padding-left-6">
      Fullscreen Modal 
    </div>
  </modal-header><modal-body><div class="row">
      <div class="col--lg-6-of-12 col--md-4-of-8">
        <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4"></div>
        <div class="row hidden-sm">
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 col--md-1-of-4">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 visible-lg">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-1-of-6 visible-lg">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
        </div>
      </div>
      <div class="col--lg-6-of-12 col--md-4-of-8 col--sm-2-of-4">
        <div class="row">
          <div class="col--lg-3-of-6 col--md-2-of-4 col--sm-1-of-2">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
          <div class="col--lg-3-of-6 col--md-2-of-4 col--sm-1-of-2">
            <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-bottom-4-sm"></div>
          </div>
        </div>
        <div class="u-aspect-ratio-3x2 c-bg-barely-white u-space-top-4-lg u-space-top-4-md"></div>
      </div>
      <div class="col--sm-2-of-4 visible-sm">
        <div class="u-aspect-ratio-3x2 c-bg-barely-white"></div>
      </div>
    </div></modal-body></modal>
Want to check out the other available boxes?
View full product details
Watchman Beanie, Copper
Description & Details
Keep warm while staying cool. The acrylic material used to make this go-with-anything beanie, keeps your head warm while also wicking moisture away so you won't get sweaty. Wear it cuffed or unrolled, and with pretty much anything you own.
View full product details
Fullscreen Modal