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
52
53
54
55
<dl class="m-detail-meta">
<div class="m-detail-meta__item">
<dt class="m-detail-meta__item-title">Area of Expertise</dt>
<dd class="m-detail-meta__item-content">
Markerting
</dd>
</div>
<div class="m-detail-meta__item">
<dt class="m-detail-meta__item-title">Article Author</dt>
<dd class="m-detail-meta__item-content">
Stephen Chupaska
</dd>
</div>
<div class="m-detail-meta__item">
<dt class="m-detail-meta__item-title">Published</dt>
<dd class="m-detail-meta__item-content">
10.14.1971
</dd>
</div>
<div class="m-detail-meta__item">
<dt class="m-detail-meta__item-title">Share</dt>
<dd class="m-detail-meta__item-content">
<ul class="m-share">
<li>
<a class="m-share__item" href="javascript:void(0);"><span class="a-icon ">
<svg class="icon--social--facebook icon" role="img" aria-labelledby="share-facebook-title ">
<title id="share-facebook-title">Share on Facebook</title>
<use role="presentation" xlink:href="#icon--social--facebook" />
</svg>
</span>
</a>
</li>
<li>
<a class="m-share__item" href="javascript:void(0);"><span class="a-icon ">
<svg class="icon--social--twitter icon" role="img" aria-labelledby="share-twitter-title ">
<title id="share-twitter-title">Share on Twitter</title>
<use role="presentation" xlink:href="#icon--social--twitter" />
</svg>
</span>
</a>
</li>
<li>
<a class="m-share__item" href="javascript:void(0);"><span class="a-icon ">
<svg class="icon--social--linkedin icon" role="img" aria-labelledby="share-linkedin-title ">
<title id="share-linkedin-title">Share on LinkedIn</title>
<use role="presentation" xlink:href="#icon--social--linkedin" />
</svg>
</span>
</a>
</li>
</ul>
</dd>
</div>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"items": [
{
"title": "Area of Expertise",
"content": "Markerting"
},
{
"title": "Article Author",
"content": "Stephen Chupaska"
},
{
"title": "Published",
"content": "10.14.1971"
},
{
"title": "Share",
"content": "<ul class=\"m-share\">\n\t<li>\n\t\t<a class=\"m-share__item\" href=\"javascript:void(0);\"><span class=\"a-icon \">\n\t<svg class=\"icon--social--facebook icon\" role=\"img\" aria-labelledby=\"share-facebook-title \" >\n\t\t\t\t\t\t\t\t\t<title id=\"share-facebook-title\">Share on Facebook</title>\n\t\t\t\t\t\t\t<use role=\"presentation\" xlink:href=\"#icon--social--facebook\"/>\n\t</svg>\n</span>\n</a>\n\t</li>\n\t<li>\n\t\t<a class=\"m-share__item\" href=\"javascript:void(0);\"><span class=\"a-icon \">\n\t<svg class=\"icon--social--twitter icon\" role=\"img\" aria-labelledby=\"share-twitter-title \" >\n\t\t\t\t\t\t\t\t\t<title id=\"share-twitter-title\">Share on Twitter</title>\n\t\t\t\t\t\t\t<use role=\"presentation\" xlink:href=\"#icon--social--twitter\"/>\n\t</svg>\n</span>\n</a>\n\t</li>\n\t<li>\n\t\t<a class=\"m-share__item\" href=\"javascript:void(0);\"><span class=\"a-icon \">\n\t<svg class=\"icon--social--linkedin icon\" role=\"img\" aria-labelledby=\"share-linkedin-title \" >\n\t\t\t\t\t\t\t\t\t<title id=\"share-linkedin-title\">Share on LinkedIn</title>\n\t\t\t\t\t\t\t<use role=\"presentation\" xlink:href=\"#icon--social--linkedin\"/>\n\t</svg>\n</span>\n</a>\n\t</li>\n</ul>\n"
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<dl class="m-detail-meta">
{% for item in items %}
<div class="m-detail-meta__item" {{ item.screenOnly ? 'data-screen-only' }}>
<dt class="m-detail-meta__item-title">{{ item.title }}</dt>
{% if item.content is iterable %}
{% for content in item.content %}
<dd class="m-detail-meta__item-content">
{{ content }}
</dd>
{% endfor %}
{% else %}
<dd class="m-detail-meta__item-content">
{{ item.content }}
</dd>
{% endif %}
</div>
{% endfor %}
</dl>
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
.m-detail-meta {
@include width-multi(
(
medium: 3,
large: 3,
xlarge: 3,
xxlarge: 3,
xxxlarge: 3,
)
);
@include child-spacing-y(
(
"xsmall": 20px,
"medium+": 24px,
),
"margin"
);
&__item {
padding-top: 12px;
border-top-width: 1px;
a:not([class]) {
@include a-link-sm;
}
}
&__item-title {
@include f-heading-1;
}
&__item-content {
@include f-body-1;
}
}