The Template Package 4.x framework uses CSS classes to manage a variety of style and placement options for images displayed with normal page content and outside of Containers. These include classes for setting the Margin, Borders, and Positioning relative to text and other UI elements on the page.
There are three Margin width options that can be applied to all images outside of Containers. They can be applied to all sides of an image or each side independently as needed. They can be combined with any Image Border, Rounded, and Shadow options.
Image Margin Specifications
|Extra Small||m-1 (margin on all sides)
|Small||m-2 (margin on all sides)
|Standard (default)||m-3 (margin on all sides)
|Medium||m-4 (margin on all sides)
|Large||m-5 (margin on all sides)
There are a variety of Border options that can be applied to images outside of Containers. The Border options can be combined with any Image Margin, Rounded, and Shadow options. Image Margin sets the space outside of the Image Border. Each Border option sets additional margin to control the space between the image and the Border.
Image Border Specifications
|Extra Small||p-1 (~4px)
|Standard (default)||p-3 (17px)
An Image rounded style can be applied to images outside of Containers. The Rounded style can be combined with any Image Margin, Border, and Shadow options.
Image Rounded Specifications
An Image Shadow style can be applied to images outside of Containers. The Shadow style can be combined with any Image Margin, Border, and Rounded options. If an Image Border is applied, the Shadow displayed outside of the Border.
Image Shadow Specifications
See details about Float options in Utilities
See details about Position options in Utilities