Modals

Small

Small factor modal. Fixed width, Relative height.

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>
    <a class="btn btn--primary u-space-bottom-3" href="#">Yes, of course</a><a class="btn btn--primary btn--outline" data-dismiss="modal" href="#">No</a></modal-body></modal>

Large

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

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>
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
50
51
<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-gray 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-gray 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-gray 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-gray 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-gray 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-gray 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-gray 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-gray 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-gray u-space-bottom-4-sm"></div>
          </div>
        </div>
        <div class="u-aspect-ratio-3x2 c-bg-barely-gray 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-gray"></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>
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.
Want to check out the other available boxes?
Yes, of courseNo