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>