CSS Classes
CSS Classes are a way that you can style your content. Since your fonts, colors, etc. are chosen for you based on your template, CSS Classes are a way to provide styling options for our users.
This section will show you all of the CSS Classes available, how to use them, examples of what they do, and what they will look like on your site (Dept A, B, or C).
NOTE: Multiple classes may be used in one component, each class is separated by a space. (Example: image-margin-right profile)
Available CSS Classes (added to CSS Class field in components):
break-before: Adds padding above component (OU Image, OU Text, and OU Text Image)
break-after: Adds padding below component (OU Image, OU Text, and OU Text Image)
emphasis: Creates a pull quote style for text (OU Text, and OU Text Image)
image-margin-left: Wraps text around an image when image aligned to the right (margin on left side of image) (OU Text Image)
image-margin-right: Wraps text around an image when image aligned to the left (margin on right side of image) (OU Text Image)
profile: Adds a box (Dept A/B, filled in grey box; Dept C, grey outline) around component (OU Text Image)
well: Adds grey (filled in) box around component (OU Text, and OU Text Image)
img-rounded: Creates a slightly cropped, rounded corners version of an image
Components: OU Image, OU Text Image
img-circle: Creates a circular crop of an image (use only with square images)
Components: OU Image, OU Text Image
NOTE: Multiple classes may be used in one component, each class is separated by a space. (Example: image-margin-right profile)
