Styles: Images
Add visual interest and communicate Plant Parents' branding story by following image implementation guidelines.
Quick Summary
File Formats: Always use either PNG or JPEG formats for inline images.
Inline Images: Always set alternative text when using inline images. To crop the
image, place inside of a div container, then add height and width properties to set the container
size. For the image element, set the width and height to inherit, and set the object-fit property
to cover. Adjust the object-position as needed.
View on Codepen.
Background Images: Only use background images when content will be overlayed, such
as in a hero image section. Ensure your image is at least wide and tall enough for the intended
location, and set the background-size to cover.
View on Codepen
Borders: Use a 5px border-radius for inline images, and no visible border.
Exceptions include Avatar Images and
Card Images.
Using Images
There are two main ways to implement images in Plant Parents digital
products: inline, and as background images. The method you choose as a developer depends on which use the
image will have, but generally it is better to use the inline method so that alt-text can
be added for SEO.
In addition, for each use of an image, there are style guidelines to be
followed.
Image Variations and Guidelines
General Image Use
For all image usages on Plant Parent digital products, high-quality images must be chosen, in png or
jpeg format. If using the inline image method, use a image with any aspect ratio inside a div element,
then crop using CSS properties on the image's containing div. If using the background-image method,
ensure your image is at least wide and tall enough to fit the element you're using it as a background
for, then use CSS properties to set the image to cover.
In most cases, the inline-image method is most appropriate. When implementing the inline-image
method, add a class to your containing div to indicate the dimensions or orientation you need, then
add CSS to that class to crop the image. In addition, add CSS to the image itself to have the width
and height inherited from the container, set object-fit to cover, set the border radius, and adjust
the object-position as desired.
In general photos should have a corner radius of 5px, and have no border, unless otherwise directed
by the use cases below. View on Codepen
Avatar Images
When developing avatars, please refer to the Avatars section of this design system. Avatar images should be implemented as inline images, then cropped to circles and given a 2px border in the brand colour Charcoal. These styles should be applied using the CSS classes demonstrated in the Avatars section. Since the images are cropped via CSS, a specified aspect ratio is not required. View on Codepen
Card Images
When developing cards, please refer to the Cards section of this design system. Similar to avatar images, card images should be implemented as inline images, then cropped using CSS properties. However, card images should match the border-radius of their card, 5px, and do not have a border. Since the images are cropped via CSS, a specified aspect ratio is not required. View Vertical Cards and Horizontal Cards on Codepen.
Card Title
Information about Card's topic
Card Title
Information about Card's topic
Hero Images
When implementing a Hero image such as the one on the Plant Parents Design System home page, use the background-image property to add the image to your container, with a gradient overlay as used in the example below. Do not use rounded corners or borders on hero images. View on Codepen
Main Heading
Hero content, perhaps a description of the page or intended use.