<img class="c-avatar u-photo" src="https://cloud.24ways.org/authors/drewmclellan280.jpg" width="280" height="280" alt="Drew McLellan" />
<img class="c-avatar u-photo" src="{{ src }}" width="{{ size }}" height="{{ size }}" alt="{{ alt }}"/>
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"src": "https://cloud.24ways.org/authors/drewmclellan280.jpg",
"alt": "Drew McLellan",
"size": 280
}
.c-avatar {
display: inline-block;
height: auto;
max-height: 21rem;
max-width: 21rem;
margin: map(spaces, medium);
clip-path: url('/assets/vectors/clip.svg#avatar');
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) content-box;
shape-margin: map(spaces, medium);
}
There are no notes for this item.