Style utilites to apply to HTML to represent a Box or Container that holds content.
Styling an div that is not interactive, with no rounded corners.
<div ods-style='container border' ods-layout="block center p:32"> Some content here!</div>const Example = () => { return ( <div ods-style='container border' ods-layout="block center p:32"> Some content here! </div> )}
export default Example;Styling an div that is interactive, with default rounded corners. We apply our interactive color on hover by default.
<div ods-style='container:hover border rounded' ods-layout="block center p:32"> Some content here!</div>const Example = () => { return ( <div ods-style='container:hover border rounded' ods-layout="block center p:32"> Some content here! </div> )}
export default Example;Showing all the possible rounded variants to style a div.
<div ods-layout="inline gap:md"> <div ods-style='container border rounded' ods-layout="block center p:32"> Base </div>
<div ods-style='container border rounded:sm' ods-layout="block center p:32"> Small </div>
<div ods-style='container border rounded:md' ods-layout="block center p:32"> Medium </div>
<div ods-style='container border rounded:lg' ods-layout="block center p:32"> Large </div>
<div ods-style='container border rounded:xl' ods-layout="block center p:32"> Xtra Large </div>
<div ods-style='container border rounded:full' ods-layout="block center p:32"> Full </div></div>const Example = () => { return ( <div ods-layout="inline gap:md"> <div ods-style='container border rounded' ods-layout="block center p:32"> Base </div>
<div ods-style='container border rounded:sm' ods-layout="block center p:32"> Small </div>
<div ods-style='container border rounded:md' ods-layout="block center p:32"> Medium </div>
<div ods-style='container border rounded:lg' ods-layout="block center p:32"> Large </div>
<div ods-style='container border rounded:xl' ods-layout="block center p:32"> Xtra Large </div>
<div ods-style='container border rounded:full' ods-layout="block center p:32"> Full </div> </div> )}
export default Example;