Avatars
Learn about avatars, and how to best use them in the Base System
1.0 Avatars
Avatars are utility classes used to style and size profile images, icons, or other visual representations of users or items. These classes ensure that avatars maintain consistent dimensions, aspect ratios, and presentation across your design. You can easily customize avatar sizes and styles to suit your project’s specific requirements.
Browse the starting utility classes and their properties in the table below. Learn more about how avatars are used and styled in your layouts by visiting the design overview page.
2.0 Avatar Classes
Avatars come with predefined styles for consistent use across your project. The table below outlines the default avatar classes and their associated properties. You can modify these classes or create custom ones to fit your specific design needs.
These classes provide suggest approach, but the default styles can be changed to suit any requirements your project has.
3.0 General Usage
3.1 Element Type
Avatar classes provide a utility class with a fixed width and height, along with any additional styles such as border radius. This class is typically applied to a div-block element, with an image inside that is given the class Image Cover.
3.2 Class Naming
Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.
Sections: Default sections use descriptive names based on the top and bottom padding.
Example:
Column Large,Column Regular,Row Small
Custom Sections: Use section as a suffix to the parent category
Example:
Testmonial Column Small,Pricing Feature Row
Last updated
