Image
These utility classes allow authors to style images. The
.u-image-left class floats the image to the left. The
.u-image-right class floats the image to the right.
Overall usage
Used to apply positioning to images.
Accessibility
- The
altattributes must be used with all images. - The
altattribute must be descriptive except for decorative images, when the value can be null.
.u-image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus vitae rerum id, enim aut magnam, placeat et dignissimos consequatur praesentium voluptatibus odit? Quas doloribus iste libero sunt! Maiores, omnis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus vitae rerum id, enim aut magnam, placeat et dignissimos consequatur praesentium voluptatibus odit? Quas doloribus iste libero sunt! Maiores, omnis.
<img class="u-image" src="100x100" alt="Alt text">
.u-image-left
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus vitae rerum id, enim aut magnam, placeat et dignissimos consequatur praesentium voluptatibus odit? Quas doloribus iste libero sunt! Maiores, omnis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus vitae rerum id, enim aut magnam, placeat et dignissimos consequatur praesentium voluptatibus odit? Quas doloribus iste libero sunt! Maiores, omnis.
<img class="u-image-left" src="100x100" alt="Alt text">
.u-image-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus vitae rerum id, enim aut magnam, placeat et dignissimos consequatur praesentium voluptatibus odit? Quas doloribus iste libero sunt! Maiores, omnis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus vitae rerum id, enim aut magnam, placeat et dignissimos consequatur praesentium voluptatibus odit? Quas doloribus iste libero sunt! Maiores, omnis.
<img class="u-image-right" src="100x100" alt="Alt text">