OLYSENSE Design System

Styling an div that is not interactive, with no rounded corners.

Some content here!

<div ods-style='container border' ods-layout="block center p:32">
  Some content here!
</div>

Styling an div that is interactive, with default rounded corners. We apply our interactive color on hover by default.

Some content here!

<div ods-style='container:hover border rounded' ods-layout="block center p:32">
  Some content here!
</div>

Showing all the possible rounded variants to style a div.

Base

Small

Medium

Large

Xtra Large

Full

<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;

Container

Basic

Hover

Rounded