2.6.1 base.embedded.img Images

Toggle example guides Toggle HTML markup

An <img> element represents an image. We are using the following image styles in Drupal. You can use devtools to inspect images.

Name Sizes Effects Example
Social extra extra large 1200 x 423 Scale & crop Hero background
Social extra large 220 x 220 Scale & crop Event teaser
Social large 128 x 128 Scale & crop Profile image
Social medium 44 x 44 Scale & crop Stream avatar
Social small 24 x 24 Scale & crop Newest members listd
Example

An image that is inline with other text.

An image inside a figure.
Markup: 01-base/embedded/embedded-img.twig
<p>An image <img src="kss-assets/sample-inline.png"> that is inline with other text.</p>

<figure style="width: 50%; max-width: 300px;">
  <figcaption>An image inside a figure.</figcaption>
  <img src="kss-assets/sample.png">
</figure>
Source: 01-base/embedded/_embedded.scss, line 7