rivendellweb pattern library

Image Variations: Medium 

<img class="image small" src="http://via.placeholder.com/640x360" alt="placeholder image" width="640" height="360" />
 
<img class="image small"
  src="http://via.placeholder.com/640x360"
  alt="placeholder image"
  width="640"
  height="360"/>
{{!-- 
  "context": {
    "src": "",
    "alt": "placeholder image",
    "width": "640px",
    "height": "360px"
  }
 --}}
 
/* No context defined. */
  • Content: 
    .rounded {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.thumb {
  width: 200px;
  height: 200px;
}

.small {
  width: 320px;
  height: 180px;
}

.medium {
  width: 640px;
  height: 360px;
}

.large {
  width: 960px;
  height: 540px;
}

.xlarge {
  width: 1280px;
  height: 720px;
}

.banner {
  width: 1600px;
  height: 400px;
}

.hero {
  width: 1920px;
  height: 1080px;
}
  • URL: /components/raw/image/image.css
  • Filesystem Path: src/components/01-atoms/30-media/image/image.css
  • Size: 388 Bytes

No notes defined.