* This page is a work in progress. There are many other classes that the framework provides with regards to many aspects of CSS that you would do manually. Ideally, we want to use as many AutomaticCSS classes as possible because they are created to be automatically responsive.
All heading sizes are set according to the sizing provided by the framework. You can use the accompanying --text classes to set the sizing of either a certain heading or text.
You can also hook into these text sizing classes by using var(--text-[size]) to create a custom class.
Heading One (--text-xxl)
Heading Two (--text-xl)
Heading Three (--text-l)
Heading Four (--text-m)
Heading Five (--text-s)
Heading Six (--text-xs)
Button Classes
These button classes don't natively provide a border radius. If you want to assign a specific radius to the buttons, simply go to the Advanced Settings > Border > Border Radius > Set Unit To None > Use var(--radius-[size]) to assign a radius.
Owl spacing automatically adds margin between items within a container so you don't have to set them manually for every element.
owl--xxl
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
owl--xl
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
owl--l
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
owl--m
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
owl--s
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
owl--xs
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
Padding
You can use the pad class to add all-around padding to a container.
pad--xxl
This is a block of text. Double-click this text to edit it.
pad--xl
This is a block of text. Double-click this text to edit it.
pad--l
This is a block of text. Double-click this text to edit it.
pad--m
This is a block of text. Double-click this text to edit it.
pad--s
This is a block of text. Double-click this text to edit it.
pad--xs
This is a block of text. Double-click this text to edit it.
pad--none
This is a block of text. Double-click this text to edit it.
Border Radius
You can use the rounded--[size] class to set the border radius of an element. If you want to use this class for buttons, you need to set the Border Radius for the button within the Advanced Settings > Border > Border Radius > Set Unit To None > Use var(--radius-[size])
rounded--circle
This is a block of text. Double-click this text to edit it.
rounded--xxl
This is a block of text. Double-click this text to edit it.
rounded--xl
This is a block of text. Double-click this text to edit it.
rounded--l
This is a block of text. Double-click this text to edit it.
rounded--m
This is a block of text. Double-click this text to edit it.
rounded--s
This is a block of text. Double-click this text to edit it.
rounded--xs
This is a block of text. Double-click this text to edit it.
This website uses cookies and similar technologies to manage your sessions, manage content, and improve your website experience. To learn more about these technologies, your options, and about other categories of personal information we collect through this website and how we may use it, please see our Privacy Policy. This notice is effective for your use of this website for the next 14 days.
