Product Grid

Available product

1
2
3
4
5
6
7
8
9
10
11
12
    <bp-grid-cell class="grid-cell grid-cell--product"><bp-product-grid-cell class="product-grid-cell">
        <div class="product-grid-cell__image-wrapper">
          <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMDAvNDEvMTkvOTFkZjljODUtNzI2NS00N2FiLWI0NjUtNzQ5NDYwMDFjZjI4L25zLTUtZ3JheS1ERU5JTS1KRUFOLTFfMTAyNHgxMDI0LmpwZyJdLFsicCIsInRodW1iIiwiNTIweFx1MDAzZSJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDcxIC1iYWNrZ3JvdW5kICNGNkY0RjQgLWZsYXR0ZW4iXV0/DENIM-JEAN-1_1024x1024.jpg?sha=0ac888ad4673d668" />
          </a>
        </div>
        <div class="product-grid-cell__metadata">
          <a class="product-grid-cell__name" href="javascript://" title="The Slim Jean in Come Mills '68 Selvage">The Slim Jean in Come Mills '68 Selvage</a><a class="product-grid-cell__brand" href="javascript://" title="Taylor Stitch">Taylor Stitch</a>
          <div class="product-grid-cell__price-data"><span class="product-grid-cell__price product-grid-cell__price--product-price">$145</span> 
          </div>
        </div>
      </bp-product-grid-cell></bp-grid-cell>

Discounted w/ badge

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <bp-grid-cell class="grid-cell grid-cell--product"><bp-product-grid-cell class="product-grid-cell">
        <div class="product-grid-cell__image-wrapper">
          <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMTgvMTIvMzkvMzI1NzY5ODktOWEwNC00NzZlLTg4N2MtZDY5NmZhMjU2N2QyL25zLTEtZ3JheS1yZWZyZXNoLXByZW1pdW0tZG9wcC1raXQtMSAoMSkuanBnIl0sWyJwIiwidGh1bWIiLCI1MjB4XHUwMDNlIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzEgLWJhY2tncm91bmQgI0Y2RjRGNCAtZmxhdHRlbiJdXQ/refresh-premium-dopp-kit-1%20(1).jpg?sha=7bc7df07a2408c5c" />
            <div class="product-grid-cell__collection-tag">
              Exclusive
            </div>
          </a>
        </div>
        <div class="product-grid-cell__metadata">
          <a class="product-grid-cell__name" href="javascript://" title="Leather Dopp Kit">Leather Dopp Kit</a><a class="product-grid-cell__brand" href="javascript://" title="Blue Claw Co.">Blue Claw Co.</a>
          <div class="product-grid-cell__price-data">
            <span class="product-grid-cell__price product-grid-cell__price--retail">$951</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$160</span> <span class="product-grid-cell__more-options-wrapper"><a class="product-grid-cell__more-options" href="javascript://">More Colors</a></span>
          </div>
        </div>
      </bp-product-grid-cell></bp-grid-cell>

Sold out w/ badge

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <bp-grid-cell class="grid-cell grid-cell--product"><bp-product-grid-cell class="product-grid-cell  product-grid-cell--sold-out">
        <div class="product-grid-cell__image-wrapper">
          <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMTgvMTIvMTgvNzYxMDdiZTgtZjc2OC00Zjc1LWJlMzItMWFjYzljMTQ4NzBkL25zLTMtZ3JheS1qYWNrLWVyd2luLXNob2VzLTEuanBnIl0sWyJwIiwidGh1bWIiLCI1MjB4XHUwMDNlIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzEgLWJhY2tncm91bmQgI0Y2RjRGNCAtZmxhdHRlbiJdXQ/jack-erwin-shoes-1.jpg?sha=b351026b06606ec5" />
            <div class="product-grid-cell__collection-tag">
              Exclusive
            </div>
          </a>
        </div>
        <div class="product-grid-cell__metadata">
          <a class="product-grid-cell__name" href="javascript://" title="Jasper Medallion-Toe Oxford">Jasper Medallion-Toe Oxford</a><a class="product-grid-cell__brand" href="javascript://" title="Jack Erwin">Jack Erwin</a>
          <div class="product-grid-cell__price-data">
            <span class="product-grid-cell__price product-grid-cell__price--retail">$195</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$156</span> <span class="product-grid-cell__sold-out-label">Sold out</span> <span class="product-grid-cell__more-options-wrapper"><a class="product-grid-cell__more-options" href="javascript://">More Colors</a></span>
          </div>
        </div>
      </bp-product-grid-cell></bp-grid-cell>

Condensed

Alternate view used on box pages and sold out product page

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
    <bp-grid-cell class="grid-cell grid-cell--product"><bp-product-grid-cell class="product-grid-cell  product-grid-cell--condensed">
        <div class="product-grid-cell__image-wrapper">
          <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMTkvNTQvNDYvOWFhYzMyMjctMjI1YS00ODgyLWE0NjctNmVhNDQ1YzM2NzUyL25zLTEtZ3JheS1maWViaW5ncy13YXRlci1wcm90ZWN0b3IuanBnIl0sWyJwIiwidGh1bWIiLCI1MjB4XHUwMDNlIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzEgLWJhY2tncm91bmQgI0Y2RjRGNCAtZmxhdHRlbiJdXQ/fiebings-water-protector.jpg?sha=04f097aba00c7729" />
            <div class="product-grid-cell__collection-tag">
              Exclusive
            </div>
          </a>
        </div>
        <div class="product-grid-cell__metadata">
          <a class="product-grid-cell__name" href="javascript://" title="Water Protector Spray">Water Protector Spray</a><a class="product-grid-cell__brand" href="javascript://" title="Fiebing's">Fiebing's</a>
          <div class="product-grid-cell__price-data">
            <span class="product-grid-cell__price product-grid-cell__price--retail">$11</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$9</span> 
          </div>
        </div>
      </bp-product-grid-cell></bp-grid-cell><bp-grid-cell class="grid-cell grid-cell--product"><bp-product-grid-cell class="product-grid-cell  product-grid-cell--sold-out product-grid-cell--condensed">
        <div class="product-grid-cell__image-wrapper">
          <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMTAvMTMvMTUvMTkvNDIvNTFmYWY3MGEtMWYxZC00YTAwLWE2NjQtMWExMmFlZWUxMjA3L3ctYW5kLXAtZGVzaWduLWJlZXItZmxpZ2h0LTEuanBnIl0sWyJwIiwidGh1bWIiLCI1MjB4XHUwMDNlIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzEgLWJhY2tncm91bmQgI0Y2RjRGNCAtZmxhdHRlbiJdXQ/w-and-p-design-beer-flight-1.jpg?sha=4235d7bd72409e56" />
            <div class="product-grid-cell__collection-tag">
              Exclusive
            </div>
          </a>
        </div>
        <div class="product-grid-cell__metadata">
          <a class="product-grid-cell__name" href="javascript://" title="Beer Flight Paddle with Set of Four Glasses">Beer Flight Paddle with Set of Four Glasses</a><a class="product-grid-cell__brand" href="javascript://" title="Beer Flight Paddles">Beer Flight Paddles</a>
          <div class="product-grid-cell__price-data">
            <span class="product-grid-cell__price product-grid-cell__price--retail">$30</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$29</span> <span class="product-grid-cell__sold-out-label">Sold out</span> <span class="product-grid-cell__more-options-wrapper"><a class="product-grid-cell__more-options" href="javascript://">More Sizes</a></span>
          </div>
        </div>
      </bp-product-grid-cell></bp-grid-cell>

Brand

1
2
3
4
5
6
7
8
9
10
11
12
    <bp-grid-cell class="grid-cell grid-cell--product"><bp-product-grid-cell class="product-grid-cell  product-grid-cell--brand">
        <div class="product-grid-cell__image-wrapper">
          <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMTAvMTMvMTkvNTIvMTMvNDI4Mzc4MGYtYzIzZi00ZWQ0LTliYzMtNmQ0MzJjNmZiMjA0L3RheWxvci1zdGl0Y2gtdGhlLWFsYmlvbi1qYWNrZXQtYXJteS5qcGciXSxbInAiLCJ0aHVtYiIsIjUyMHhcdTAwM2UiXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA3MSAtYmFja2dyb3VuZCAjRjZGNEY0IC1mbGF0dGVuIl1d/taylor-stitch-the-albion-jacket-army.jpg?sha=40596e4db8789329" />
          </a>
        </div>
        <div class="product-grid-cell__metadata">
          <a class="product-grid-cell__name" href="javascript://"></a><a class="product-grid-cell__brand" href="javascript://" title="Taylor Stitch">Taylor Stitch</a>
          <div class="product-grid-cell__price-data"><span class="product-grid-cell__price product-grid-cell__price--product-price"></span> 
          </div>
        </div>
      </bp-product-grid-cell></bp-grid-cell>

Standard grid with slider on SM

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
<div class="product-grid-list-with-slider row">
  <bp-grid-cell class="grid-cell grid-cell--product col--md-4-of-8 col--lg-3-of-12"><bp-product-grid-cell class="product-grid-cell">
      <div class="product-grid-cell__image-wrapper">
        <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMDAvNDEvMTkvOTFkZjljODUtNzI2NS00N2FiLWI0NjUtNzQ5NDYwMDFjZjI4L25zLTUtZ3JheS1ERU5JTS1KRUFOLTFfMTAyNHgxMDI0LmpwZyJdLFsicCIsInRodW1iIiwiNTIweFx1MDAzZSJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDcxIC1iYWNrZ3JvdW5kICNGNkY0RjQgLWZsYXR0ZW4iXV0/DENIM-JEAN-1_1024x1024.jpg?sha=0ac888ad4673d668" />
        </a>
      </div>
      <div class="product-grid-cell__metadata">
        <a class="product-grid-cell__name" href="javascript://" title="Water Protector Spray">Water Protector Spray</a><a class="product-grid-cell__brand" href="javascript://" title="Fiebing's">Fiebing's</a>
        <div class="product-grid-cell__price-data">
          <span class="product-grid-cell__price product-grid-cell__price--retail">$11</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$9</span> 
        </div>
      </div>
    </bp-product-grid-cell></bp-grid-cell><bp-grid-cell class="grid-cell grid-cell--product col--md-4-of-8 col--lg-3-of-12"><bp-product-grid-cell class="product-grid-cell">
      <div class="product-grid-cell__image-wrapper">
        <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMTgvMTIvMzkvMzI1NzY5ODktOWEwNC00NzZlLTg4N2MtZDY5NmZhMjU2N2QyL25zLTEtZ3JheS1yZWZyZXNoLXByZW1pdW0tZG9wcC1raXQtMSAoMSkuanBnIl0sWyJwIiwidGh1bWIiLCI1MjB4XHUwMDNlIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzEgLWJhY2tncm91bmQgI0Y2RjRGNCAtZmxhdHRlbiJdXQ/refresh-premium-dopp-kit-1%20(1).jpg?sha=7bc7df07a2408c5c" />
        </a>
      </div>
      <div class="product-grid-cell__metadata">
        <a class="product-grid-cell__name" href="javascript://" title="Leather Dopp Kit">Leather Dopp Kit</a><a class="product-grid-cell__brand" href="javascript://" title="Blue Claw Co.">Blue Claw Co.</a>
        <div class="product-grid-cell__price-data">
          <span class="product-grid-cell__price product-grid-cell__price--retail">$951</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$160</span> <span class="product-grid-cell__more-options-wrapper"><a class="product-grid-cell__more-options" href="javascript://">More Colors</a></span>
        </div>
      </div>
    </bp-product-grid-cell></bp-grid-cell><bp-grid-cell class="grid-cell grid-cell--product col--md-4-of-8 col--lg-3-of-12"><bp-product-grid-cell class="product-grid-cell">
      <div class="product-grid-cell__image-wrapper">
        <a class="product-grid-cell__image" href="javascript://"><img src="https://assets.bespokepost.com/media/W1siZiIsIjIwMTcvMDgvMDEvMTgvMTIvMTgvNzYxMDdiZTgtZjc2OC00Zjc1LWJlMzItMWFjYzljMTQ4NzBkL25zLTMtZ3JheS1qYWNrLWVyd2luLXNob2VzLTEuanBnIl0sWyJwIiwidGh1bWIiLCI1MjB4XHUwMDNlIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzEgLWJhY2tncm91bmQgI0Y2RjRGNCAtZmxhdHRlbiJdXQ/jack-erwin-shoes-1.jpg?sha=b351026b06606ec5" />
        </a>
      </div>
      <div class="product-grid-cell__metadata">
        <a class="product-grid-cell__name" href="javascript://" title="Jasper Medallion-Toe Oxford">Jasper Medallion-Toe Oxford</a><a class="product-grid-cell__brand" href="javascript://" title="Jack Erwin">Jack Erwin</a>
        <div class="product-grid-cell__price-data">
          <span class="product-grid-cell__price product-grid-cell__price--retail">$195</span> <span class="product-grid-cell__price product-grid-cell__price--product-price">$156</span> <span class="product-grid-cell__more-options-wrapper"><a class="product-grid-cell__more-options" href="javascript://">More Colors</a></span>
        </div>
      </div>
    </bp-product-grid-cell></bp-grid-cell>
  <div class="col--md-4-of-8 col--lg-3-of-12 grid-cell grid-cell--row-end-button">
    <div class="product-grid-list-with-slider__row-end-button">
      <a class="product-grid-list-with-slider__row-end-button-content">Shop All</a>
    </div>
  </div>
</div>

Standard article grid list

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
<div class="article-grid-list article-grid-list--standard row">
  <div class="grid-cell article-grid-cell col--sm-4-of-4 col--md-2-of-8 col--lg-3-of-12">
    <div class="row vertical-align-sm">
      <div class="col--sm-1-of-4 col--md-4-of-4 col--lg-12-of-12">
        <a class="u-block u-aspect-ratio-3x2-lg u-aspect-ratio-3x2-md u-aspect-ratio-1x1-sm background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTUvMTAvMzAvMDEvNTgvNTAvNzcvSU1HXzc1NTRfMi5qcGciXSxbInAiLCJ0aHVtYiIsIjE0MTB4PiJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDc1IC1iYWNrZ3JvdW5kIHdoaXRlIC1mbGF0dGVuIl1d/IMG_7554%202.jpg)"></a>
      </div>
      <div class="article-grid-cell__metadata col--sm-3-of-4 col--md-4-of-4 col--lg-12-of-12">
        <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
          <a class="article-grid-cell__category">Personal Care</a><a class="article-grid-cell__category">Grooming</a>
        </div>
        <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">What’s the Right Razor Type for You?</a>
      </div>
    </div>
  </div><div class="grid-cell article-grid-cell col--sm-4-of-4 col--md-2-of-8 col--lg-3-of-12">
    <div class="row vertical-align-sm">
      <div class="col--sm-1-of-4 col--md-4-of-4 col--lg-12-of-12">
        <a class="u-block u-aspect-ratio-3x2-lg u-aspect-ratio-3x2-md u-aspect-ratio-1x1-sm background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTUvMDYvMjQvMjIvMjQvMDkvNjE4L2hvd190b190cmVhdF9zdW5idXJuLmpwZyJdLFsicCIsInRodW1iIiwiMTQxMHg%2BIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzUgLWJhY2tncm91bmQgd2hpdGUgLWZsYXR0ZW4iXV0/how-to-treat-sunburn.jpg)"></a>
      </div>
      <div class="article-grid-cell__metadata col--sm-3-of-4 col--md-4-of-4 col--lg-12-of-12">
        <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
          <a class="article-grid-cell__category">Life</a><a class="article-grid-cell__category">Health</a>
        </div>
        <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">The Quickest Ways to Soothe Sunburn</a>
      </div>
    </div>
  </div><div class="grid-cell article-grid-cell col--sm-4-of-4 col--md-2-of-8 col--lg-3-of-12">
    <div class="row vertical-align-sm">
      <div class="col--sm-1-of-4 col--md-4-of-4 col--lg-12-of-12">
        <a class="u-block u-aspect-ratio-3x2-lg u-aspect-ratio-3x2-md u-aspect-ratio-1x1-sm background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTYvMDcvMjcvMTYvNTUvMjMvNjAyL3dpbmVfdGVybXNfcmVzaG9vdC5qcGciXSxbInAiLCJ0aHVtYiIsIjE0MTB4PiJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDc1IC1iYWNrZ3JvdW5kIHdoaXRlIC1mbGF0dGVuIl1d/wine-terms-reshoot.jpg)"></a>
      </div>
      <div class="article-grid-cell__metadata col--sm-3-of-4 col--md-4-of-4 col--lg-12-of-12">
        <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
          <a class="article-grid-cell__category">Provisions</a><a class="article-grid-cell__category">Wine</a>
        </div>
        <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">How to Speak Like a Sommelier</a>
      </div>
    </div>
  </div><div class="grid-cell article-grid-cell col--sm-4-of-4 col--md-2-of-8 col--lg-3-of-12">
    <div class="row vertical-align-sm">
      <div class="col--sm-1-of-4 col--md-4-of-4 col--lg-12-of-12">
        <a class="u-block u-aspect-ratio-3x2-lg u-aspect-ratio-3x2-md u-aspect-ratio-1x1-sm background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTUvMDgvMzEvMjIvMzMvMzMvOTU1L1ZveHNhcnRvcmlhc19TaG9lX0Nsb3NldC5qcGciXSxbInAiLCJ0aHVtYiIsIjE0MTB4PiJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDc1IC1iYWNrZ3JvdW5kIHdoaXRlIC1mbGF0dGVuIl1d/Voxsartorias-Shoe-Closet.jpg)"></a>
      </div>
      <div class="article-grid-cell__metadata col--sm-3-of-4 col--md-4-of-4 col--lg-12-of-12">
        <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
          <a class="article-grid-cell__category">Style</a><a class="article-grid-cell__category">Shoes</a>
        </div>
        <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">The Dress Shoe Styles Every Man Should Know</a>
      </div>
    </div>
  </div>
</div>

Featured article grid list

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
<div class="article-grid-list article-grid-list--featured clearfix">
  <div class="grid-cell article-grid-cell article-grid-cell--hero row u-relative">
    <div class="article-grid-cell__image col--sm-4-of-4 col--lg-8-of-12">
      <a class="u-block u-aspect-ratio-3x2 background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTUvMTAvMzAvMDEvNTgvNTAvNzcvSU1HXzc1NTRfMi5qcGciXSxbInAiLCJ0aHVtYiIsIjE0MTB4PiJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDc1IC1iYWNrZ3JvdW5kIHdoaXRlIC1mbGF0dGVuIl1d/IMG_7554%202.jpg)"></a>
    </div>
    <div class="article-grid-cell__metadata col--sm-4-of-4 col--lg-4-of-12">
      <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
        <a class="article-grid-cell__category">Personal Care</a><a class="article-grid-cell__category">Grooming</a>
      </div>
      <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">The Dress Shoe Styles Every Man Should Know</a>
      <div class="article-grid-cell__teaser visible-lg">
        Not all shave tech is made equal. Here's what's worth using... and what's not.
      </div>
    </div>
  </div>
  <div class="row">
    <div class="grid-cell article-grid-cell article-grid-cell--compact col--lg-6-of-12">
      <div class="row vertical-align-lg">
        <div class="col--sm-4-of-4 col--lg-4-of-12">
          <a class="u-block u-aspect-ratio-1x1-lg u-aspect-ratio-3x2-md u-aspect-ratio-3x2-sm background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTUvMDYvMjQvMjIvMjQvMDkvNjE4L2hvd190b190cmVhdF9zdW5idXJuLmpwZyJdLFsicCIsInRodW1iIiwiMTQxMHg%2BIl0sWyJwIiwiZW5jb2RlIiwianBnIiwiLXF1YWxpdHkgNzUgLWJhY2tncm91bmQgd2hpdGUgLWZsYXR0ZW4iXV0/how-to-treat-sunburn.jpg)"></a>
        </div>
        <div class="article-grid-cell__metadata col--sm-4-of-4 col--lg-8-of-12">
          <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
            <a class="article-grid-cell__category">Life</a><a class="article-grid-cell__category">Health</a>
          </div>
          <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">The Quickest Ways to Soothe Sunburn</a>
          <div class="article-grid-cell__teaser visible-lg">
            Ok, so you didn't use enough sunscreen. You can't undo the damage, but you can make it a bit more manageable.
          </div>
        </div>
      </div>
    </div>
    <div class="grid-cell article-grid-cell article-grid-cell--compact col--lg-6-of-12">
      <div class="row vertical-align-lg">
        <div class="col--sm-4-of-4 col--lg-4-of-12">
          <a class="u-block u-aspect-ratio-1x1-lg u-aspect-ratio-3x2-md u-aspect-ratio-3x2-sm background-img-responsive" href="#" style="background-image: url(https://assets.spokestage.info/media/W1siZiIsIjIwMTYvMDcvMjcvMTYvNTUvMjMvNjAyL3dpbmVfdGVybXNfcmVzaG9vdC5qcGciXSxbInAiLCJ0aHVtYiIsIjE0MTB4PiJdLFsicCIsImVuY29kZSIsImpwZyIsIi1xdWFsaXR5IDc1IC1iYWNrZ3JvdW5kIHdoaXRlIC1mbGF0dGVuIl1d/wine-terms-reshoot.jpg)"></a>
        </div>
        <div class="article-grid-cell__metadata col--sm-4-of-4 col--lg-8-of-12">
          <div class="article-grid-cell__categories u-space-top-3 t-meta-caps">
            <a class="article-grid-cell__category">Provisions</a><a class="article-grid-cell__category">Wine</a>
          </div>
          <a class="article-grid-cell__title u-block u-space-top-2 u-space-top-1-md u-space-top-1-sm">How to Speak Like a Sommelier</a>
          <div class="article-grid-cell__teaser visible-lg">
            You don't need a degree – just a few key terms and a little bit of know-how to use 'em the right way.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>