<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
}
  • Content:
    .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);
    }
    
  • URL: /components/raw/avatar/avatar.css
  • Filesystem Path: src/components/common/avatar/avatar.css
  • Size: 345 Bytes

There are no notes for this item.