Image Stylesheet

Current Styles

img

This is a basic image with no classes or custom styling.

HTML Example

<img src="/path/to/image" alt="Alt text" loading="lazy">

Example

.image-480-[left | right]

Use .image-480-left or .image-480-right to float images accordingly. Width of image remains the same (480px) on desktop until the page width becomes smaller than the image's width or it reaches a minimum breakpoint.

Use the buttons in the example below to play around with the different image float classes.

HTML Example

<img class="image-480-left" src="/path/to/image" alt="Alt text" loading="lazy">

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque in. Euismod elementum nisi quis eleifend quam adipiscing. Mi tempus imperdiet nulla malesuada pellentesque. Vulputate mi sit amet mauris commodo. Dapibus ultrices in iaculis nunc sed augue lacus. Neque sodales ut etiam sit. Porttitor leo a diam sollicitudin. Viverra mauris in aliquam sem. Auctor eu augue ut lectus arcu bibendum at varius vel. Ut lectus arcu bibendum at varius vel. Hendrerit dolor magna eget est. Diam ut venenatis tellus in metus vulputate eu scelerisque. Blandit aliquam etiam erat velit scelerisque in. Nisl pretium fusce id velit ut tortor pretium viverra. Porttitor rhoncus dolor purus non enim praesent elementum. Nam libero justo laoreet sit amet cursus. Lectus arcu bibendum at varius vel pharetra vel. Egestas sed tempus urna et pharetra pharetra. Mattis vulputate enim nulla aliquet porttitor. Neque gravida in fermentum et sollicitudin ac. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tincidunt vitae semper quis lectus nulla at volutpat diam. Mi in nulla posuere sollicitudin aliquam.

.image-325-[left | right]

Use .image-325-left or .image-325-right to float images accordingly. Width of image remains the same (325px) on desktop until the page width becomes smaller than the image's width or it reaches a minimum breakpoint.

HTML Example

<img class="image-325-left" src="/path/to/image" alt="Alt text" loading="lazy">

Example

figure (altered)

This is a basic figure element with the figure element being modified to fix some issues with Web Two's figure rules. This is what the basic figure element looks like in production. The .fig-altered class also adds the override rules to Web Two's elements if our custom overrides on the figure element are removed. Image keeps a width of 480px minimum in desktop and mobile.

HTML Example

<figure>
  <p>
    <img src="path/to/image" alt="Alt text" loading="lazy">
  </p>
  <figcaption>
    Caption text
  </figcaption>
</figure>

Example

.figure-float-[left | right]

Use .figure-float-left and .figure-float-right to float figure elements. Image remains the same width until page width is less than the image's width or the smallest breakpoint is reached. However, image will always have a minimum width of 480px, therefore it may be wider in mobile. Additionally, if the image is too large, it will take up the full width of the page on desktop even though it is floated.

HTML Example

<figure class="figure-float-left">
  <p>
    <img src="path/to/image" alt="Alt text" loading="lazy">
  </p>
  <figcaption>
    Caption text
  </figcaption>
</figure>

Example

Non curabitur gravida arcu ac tortor. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Risus at ultrices mi tempus. In arcu cursus euismod quis viverra nibh. Adipiscing at in tellus integer feugiat. Amet facilisis magna etiam tempor orci eu. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Netus et malesuada fames ac turpis egestas maecenas pharetra. Malesuada fames ac turpis egestas. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Turpis egestas pretium aenean pharetra magna. Auctor urna nunc id cursus metus aliquam. Sit amet volutpat consequat mauris nunc congue. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Velit scelerisque in dictum non consectetur a erat nam. Non curabitur gravida arcu ac tortor. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Risus at ultrices mi tempus. In arcu cursus euismod quis viverra nibh.

New Styles

.img-[half | third | quarter]-[left | right]

Use .img-half-left or .img-half-right classes to float images accordingly. By default, the images will take 50% of the page width on desktop and will expand to 100% on mobile.

To reduce the size of the images, use .img-third-left and .img-third-right to make the images use 1/3 of the page width instead of 50%. For even smaller images, use .img-quarter-left and .img-quarter-right to take up 25% of the space.

Use the buttons in the example below to play around with the different image float classes.

HTML Example

<img class="img-half-left" src="/path/to/image" alt="Alt text" loading="lazy">

Example

random placeholder image

Longer Images

Try testing out the classes on longer images as well.

Example

random placeholder image

.fig

For figure elements, use the .fig class instead. By default, the image will be centered with the caption spanning 100% of the page width (minus margins) rather than the image's width. If the image is too small, it will have a minimum width of 50% regardless. If the image is less than 100% of the page width but greater than 50%, it will be centered. Large enough images that can fill 100%+ of the space will simply take up 100% width. On mobile, all images will take 100% of the screen width. Captions are not centered by default.

The example below demonstrates first a figure with an image that is too small to fit the entire page width (200px x 200px) and is given a minimum width of 50%. The second figure's image is large enough to fit the entire page width.

HTML Example

<figure class="fig">
  <p>
    <img src="path/to/image" alt="Alt text" loading="lazy">
  </p>
  <figcaption>
    Caption text
  </figcaption>
</figure>

Example

Nunc sed blandit libero volutpat sed cras ornare arcu. Morbi tristique senectus et netus et malesuada fames ac. Augue interdum velit euismod in. Vitae congue eu consequat ac felis donec et odio. Risus commodo viverra maecenas accumsan lacus vel. Quam lacus suspendisse faucibus interdum posuere lorem. Sit amet consectetur adipiscing elit ut. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam.

Nunc sed blandit libero volutpat sed cras ornare arcu. Morbi tristique senectus et netus et malesuada fames ac. Augue interdum velit euismod in. Vitae congue eu consequat ac felis donec et odio. Risus commodo viverra maecenas accumsan lacus vel. Quam lacus suspendisse faucibus interdum posuere lorem. Mattis vulputate enim nulla aliquet porttitor. Neque gravida in fermentum et sollicitudin ac. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tincidunt vitae semper quis lectus nulla at volutpat diam. Mi in nulla posuere sollicitudin aliquam.

.fig-[half | third | quarter]-[left | right]

Figures can be floated as well by applying the .fig-half-left or .fig-half-right classes. As with images, by default figures will take about 50% of the content width.

Figures can also be made smaller with .fig-third-left or .fig-third-right if you want to them to take 1/3 of the space instead. Use .fig-quarter-left or .fig-quarter-right to instead make the figure use 25% of the page width.

Floated figure images always take 100% of its figure container width, and this translates to mobile view as well.

HTML Example

<figure class="fig-half-left">
  <p>
    <img src="path/to/image" alt="Alt text" loading="lazy">
  </p>
  <figcaption>
    Caption text
  </figcaption>
</figure>