Skip Navigation

Department B

Skip Side Navigation

Dept B Styling for CSS Classes

  • break-before
    Effect: Adds padding above component
    Component: OU Image, OU Text, and OU Text Image
  • break-after
    Effect: Adds padding below component
    Component: OU Image, OU Text, and OU Text Image
  • emphasis
    Effect: Creates a pull quote style for text
    Component: OU Text, and OU Text Image
  • image-margin-left
    Effect: Wraps text around an image when image aligned to the right (margin on left side of image)
    Component: OU Text Image
  • image-margin-right
    Effect: Wraps text around an image when image aligned to the left (margin on right side of image)
    Component: OU Text Image
  • profile
    Effect: Adds a filled in grey box around component
    Component: OU Text Image
  • well
    Effect: Adds grey (filled in) box around component
    Component: OU Text, OU Text Image
  • img-rounded
    Effect: Creates a slightly cropped, rounded corners version of an image
    Component: OU Image, OU Text Image
  • img-circle
    Effect: Creates a circular crop of an image (use only with square images)
    Component: 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)

break-before

break-after

emphasis

Creates a pull quote style for text.

Creates a pull quote style for text.
Creates a pull quote style for text.

image-margin-left


When you have an image that you want ALIGNED to the RIGHT, you use image-margin-left (so the margin is on the LEFT SIDE of the image), and the text will align to the top of the image, provide padding around, and then wrap the image.

Placeholder text to illustrate the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ultrices purus. Ut varius mollis nulla, vel ultrices dui varius nec. Praesent mi ex, condimentum sit amet eros nec, molestie hendrerit ipsum. Donec sollicitudin nulla et posuere vulputate. Phasellus id vestibulum mi. Ut gravida elementum dignissim. Curabitur fringilla, lorem a blandit pharetra, lacus sapien interdum nibh, a gravida sem quam porttitor lacus. Nullam sit amet sem arcu. Sed porta leo ut tellus volutpat eleifend ut sit amet diam. Phasellus semper commodo tortor ut pharetra. Sed pharetra, diam in dignissim tincidunt, est nunc laoreet nulla, ut ornare massa sapien et magna. Integer ac massa ut est dictum feugiat in vel nunc. Sed posuere, velit nec consectetur pharetra, sem tellus euismod turpis, id faucibus enim mauris eu nibh. Suspendisse in nisl vel risus malesuada euismod vel ut nisl. Sed vel quam et leo ornare convallis ac a mi.

image-margin-right


When you have an image that you want ALIGNED to the LEFT, you use image-margin-right (so the margin is on the RIGHT SIDE of the image), and the text will align to the top of the image, provide padding around, and then wrap the image.

Placeholder text to illustrate the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ultrices purus. Ut varius mollis nulla, vel ultrices dui varius nec. Praesent mi ex, condimentum sit amet eros nec, molestie hendrerit ipsum. Donec sollicitudin nulla et posuere vulputate. Phasellus id vestibulum mi. Ut gravida elementum dignissim. Curabitur fringilla, lorem a blandit pharetra, lacus sapien interdum nibh, a gravida sem quam porttitor lacus. Nullam sit amet sem arcu. Sed porta leo ut tellus volutpat eleifend ut sit amet diam. Phasellus semper commodo tortor ut pharetra. Sed pharetra, diam in dignissim tincidunt, est nunc laoreet nulla, ut ornare massa sapien et magna. Integer ac massa ut est dictum feugiat in vel nunc. Sed posuere, velit nec consectetur pharetra, sem tellus euismod turpis, id faucibus enim mauris eu nibh. Suspendisse in nisl vel risus malesuada euismod vel ut nisl. Sed vel quam et leo ornare convallis ac a mi.

profile


Profile is used to put a grey outline around your OU Text Image. It is a nice way to make content stand out on your page and box in a specific section.

Placeholder text to illustrate the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ultrices purus. Ut varius mollis nulla, vel ultrices dui varius nec. Praesent mi ex, condimentum sit amet eros nec, molestie hendrerit ipsum. Donec sollicitudin nulla et posuere vulputate. Phasellus id vestibulum mi. Ut gravida elementum dignissim. Curabitur fringilla, lorem a blandit pharetra, lacus sapien interdum nibh, a gravida sem quam porttitor lacus. Nullam sit amet sem arcu. Sed porta leo ut tellus volutpat eleifend ut sit amet diam. Phasellus semper commodo tortor ut pharetra. Sed pharetra, diam in dignissim tincidunt, est nunc laoreet nulla, ut ornare massa sapien et magna. Integer ac massa ut est dictum feugiat in vel nunc. Sed posuere, velit nec consectetur pharetra, sem tellus euismod turpis, id faucibus enim mauris eu nibh. Suspendisse in nisl vel risus malesuada euismod vel ut nisl. Sed vel quam et leo ornare convallis ac a mi.

well – OU Text

Well is used to place a grey box around your component. This is used on an OU Text.

well – OU Text Image


Well is used to place a grey box around your component. This is used on an OU Text Image.