Images

Learn about images, and how to best use them in the Base System

1.0 Images

Images are vital visual elements used to convey information, enhance content, and improve the overall user experience. They can range from decorative elements to essential content, such as product photos or infographics. In the Base System, images are designed to be responsive, accessible, and easy to style, ensuring they integrate seamlessly into your layouts.

Explore the default image classes and properties below, or learn more about how images are used in your layouts through the media overview page.

2.0 Image Classes

Images come with predefined styles to maintain consistency and flexibility across your project. The table below outlines the default image classes and their associated properties. You can modify these classes or create custom ones to suit your design needs.

Class Name	Width	Height	Fit
Image Cover	100%	100%	Cover
Image Contain	100%	100%	Contain
Image Scale	100%	100%	Scale

3.0 General Usage

3.1 Element Type

Generally, we recommend using an embed block and SVG based icons. Using SVG icons provides a number of benefits that most designers will be familiar with, additionally it provides the following development benefits:

• Interactable in the designer: By using an SVG embed icon, users can quickly change colors of icons and add hover effects by using fill="currentColor", .

• Doesn't add asset into users project: This

• Faster Solution: Save time exporting and uploading images as it is easier to copy the svg code

However, If an icon has a shadow which is not handled well by SVG then we will use an image.

3.2 Class Naming

Class naming for sections follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Default Sections: Default sections use descriptive names based on the amount of padding

  • Example: Section Large, Section Small, Section X Small

• Custom Sections: Use section as a suffix to the parent category, can use any styles

  • Example: Testmonial Section, Pricing Section