Every content element contains support for a Class field that can be used to add custom styling to a content element. Ittrium supports the the following standard class elements that you can use, but you can also specify your own custom classes provided that you update the Public CSS file for your website to include the custom CSS that you need.
callout
Add callout to any content element to produce a border with padding around the content element. Combine your callout class with any of the following to produce a callout display with a background color that matches the standard colors that are configured for your website.
- secondary
- primary
- success
- warning
- alert
For example, you can add callout alert to a Text element if you want a border around your text with a red background.
equalize
Add equalize to any Section element using a grid layout or any Grid element to force the elements inside your grid to have equal height. This is helpful when you are using a callout class with the content elements in your grid or background colors on the elements in your grid to force each element to have the same height even if the content heights are different.
font
Add font plus one of the following additional class attributes to a content element to increase or decrease the default font size which is 1rem or 16 pixels.
- less10
- less20
- less30
- less40
- less50
- plus10
- plus20
- plus30
- plus40
- plus50
There are also two additional classes, small and tiny that are easier to remember. For example, you can use font small which is the same as font less30 or font tiny which is the same as font less40.
margin
Add margin to any content element to add a margin equal to 1rem around your content element. 1rem is equal to 16 pixels by default. You can increase or decrease the margin of an element by increments of 10 percent by including one of the following classes with your margin class.
- less10
- less20
- less30
- less40
- less50
- less60
- less70
- less80
- less90
- plus10
- plus20
- plus30
- plus40
- plus50
- plus60
- plus70
- plus80
- plus90
For example, if you want to increase the margin from the standard 1rem value to a value of 1.5rem you can include a Class value of margin plus50.
The margin is applied to all four sides of your content element by default. If you want to apply margin to just the top, bottom, left or right of a content element then include one of the following additional Class values.
- top
- bottom
- left
- right
For example, if you want to add a margin to the bottom of a content element, then add margin bottom to your Class attribute. You can also increase or decrease the margin if needed with a Class configuration like margin bottom less50.
If you want to add a margin to just the top and bottom or to the left and right then you can use the following classes.
- top-bottom
- left-right
For example, to add a margin to the top and bottom of an element, you would use margin top-bottom since "margin top bottom" essentially applies a margin to the top and then removes the top margin when the bottom margin is applied due to the way in which CSS styling rules are applied.
Finally, if you need to remove the default margin that has been applied you can add margin none to your Class to set the margin to 0.
padding
Add padding to any content element to add padding equal to 1rem around your content element. 1rem is equal to 16 pixels by default. You can increase or decrease the padding of an element by increments of 10 percent by including one of the following classes with your padding class.
- less10
- less20
- less30
- less40
- less50
- less60
- less70
- less80
- less90
- plus10
- plus20
- plus30
- plus40
- plus50
- plus60
- plus70
- plus80
- plus90
For example, if you want to increase the padding from the standard 1rem value to a value of 1.5rem you can include a Class value of padding plus50.
The padding is applied to all four sides of your content element by default. If you want to apply padding to just the top, bottom, left or right of a content element then include one of the following additional Class values.
- top
- bottom
- left
- right
For example, if you want to add padding to the bottom of a content element, then add padding bottom to your Class attribute. You can also combine increase or decrease the padding here if needed with a Class configuration like padding bottom less50.
If you want to add padding to just the top and bottom or to the left and right then you can use the following classes.
- top-bottom
- left-right
For example, to add padding to the top and bottom of an element, you would use padding top-bottom since "padding top bottom" essentially applies padding to the top and then removes the top padding when the bottom padding is applied due to the way in which CSS styling rules are applied.
Finally, if you need to remove any default padding that has been applied you can add padding none to your Class to set the padding to 0.