rivendellweb pattern library

Image Variations: Small 

<img class="image small" src="http://via.placeholder.com/320x180" alt="placeholder image" width="320" height="180" />
 
<img class="image small"
  src="http://via.placeholder.com/320x180"
  alt="placeholder image"
  width="320"
  height="180"/>
{{!-- 
      "context": {
        "src": "",
        "alt": "placeholder image",
        "width": "320px",
        "height": "180px"
      }
 --}}
 
/* 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.