OLYSENSE Design System

Margins can be applied to HTML elements using classes which match to our Space tokens.

m:2

m:4

m:8

m:12

m:16

m:24

m:32

m:48

m:64

<div class='demo demo-margin'>
  <div ods-layout="m:2 p:xs">m:2</div>
  <div ods-layout="m:4 p:xs">m:4</div>
  <div ods-layout="m:8 p:xs">m:8</div>
  <div ods-layout="m:12 p:xs">m:12</div>
  <div ods-layout="m:16 p:xs">m:16</div>
  <div ods-layout="m:24 p:xs">m:24</div>
  <div ods-layout="m:32 p:xs">m:32</div>
  <div ods-layout="m:48 p:xs">m:48</div>
  <div ods-layout="m:64 p:xs">m:64</div>
</div>

<style>
  .demo-margin > *:not([sense-layout*='grid']) {
    min-width: unset;
    min-height: unset;
  }
</style>

const Example = () => {
  return (
    <div ods-layout="stretch" className='demo'>
      <div ods-layout="m:2">m:2</div>
      <div ods-layout="m:4">m:4</div>
      <div ods-layout="m:8">m:8</div>
      <div ods-layout="m:12">m:12</div>
      <div ods-layout="m:16">m:16</div>
      <div ods-layout="m:24">m:24</div>
      <div ods-layout="m:32">m:32</div>
      <div ods-layout="m:48">m:48</div>
      <div ods-layout="m:64">m:64</div>
    </div>
  )
}

export default Example;

Class Name	Token
m:none	--ods-sys-space-0
m:2	--ods-sys-space-2
m:4	--ods-sys-space-4
m:8	--ods-sys-space-8
m:12	--ods-sys-space-12
m:16	--ods-sys-space-16
m:24	--ods-sys-space-24
m:32	--ods-sys-space-32
m:48	--ods-sys-space-48
m:64	--ods-sys-space-64

Class Name	Token
mx:none	--ods-sys-space-0
mx:2	--ods-sys-space-2
mx:4	--ods-sys-space-4
mx:8	--ods-sys-space-8
mx:12	--ods-sys-space-12
mx:16	--ods-sys-space-16
mx:24	--ods-sys-space-24
mx:32	--ods-sys-space-32
mx:48	--ods-sys-space-48
mx:64	--ods-sys-space-64

Class Name	Token
my:none	--ods-sys-space-0
my:2	--ods-sys-space-2
my:4	--ods-sys-space-4
my:8	--ods-sys-space-8
my:12	--ods-sys-space-12
my:16	--ods-sys-space-16
my:24	--ods-sys-space-24
my:32	--ods-sys-space-32
my:48	--ods-sys-space-48
my:64	--ods-sys-space-64

Class Name	Token
mt:none	--ods-sys-space-0
mt:2	--ods-sys-space-2
mt:4	--ods-sys-space-4
mt:8	--ods-sys-space-8
mt:12	--ods-sys-space-12
mt:16	--ods-sys-space-16
mt:24	--ods-sys-space-24
mt:32	--ods-sys-space-32
mt:48	--ods-sys-space-48
mt:64	--ods-sys-space-64

Class Name	Token
mb:none	--ods-sys-space-0
mb:2	--ods-sys-space-2
mb:4	--ods-sys-space-4
mb:8	--ods-sys-space-8
mb:12	--ods-sys-space-12
mb:16	--ods-sys-space-16
mb:24	--ods-sys-space-24
mb:32	--ods-sys-space-32
mb:48	--ods-sys-space-48
mb:64	--ods-sys-space-64

Padding can be applied to HTML elements using classes which match to our Space tokens.

p:2

p:4

p:8

p:12

p:16

p:24

p:32

p:48

p:64

<div ods-layout="inline gap:xs" class='demo demo-padding'>
  <div ods-layout="p:2">p:2</div>
  <div ods-layout="p:4">p:4</div>
  <div ods-layout="p:8">p:8</div>
  <div ods-layout="p:12">p:12</div>
  <div ods-layout="p:16">p:16</div>
  <div ods-layout="p:24">p:24</div>
  <div ods-layout="p:32">p:32</div>
  <div ods-layout="p:48">p:48</div>
  <div ods-layout="p:64">p:64</div>
</div>

<style>
  .demo-padding > *:not([sense-layout*='grid']) {
    width: auto;
    height: 100%;
    min-width: unset;
    min-height: unset;
  }
</style>

const css = `
.demo-padding > *:not([sense-layout*='grid']) {
    width: auto;
    height: 100%;
    min-width: unset;
    min-height: unset;
  }
`

const Example = () => {
  return (
    <>
       <div ods-layout="inline gap:xs" className='demo demo-padding'>
          <div ods-layout="p:2">p:2</div>
          <div ods-layout="p:4">p:4</div>
          <div ods-layout="p:8">p:8</div>
          <div ods-layout="p:12">p:12</div>
          <div ods-layout="p:16">p:16</div>
          <div ods-layout="p:24">p:24</div>
          <div ods-layout="p:32">p:32</div>
          <div ods-layout="p:48">p:48</div>
          <div ods-layout="p:64">p:64</div>
        </div>

        <style>{css}</style>
    </>

  )
}

export default Example;

Class Name	Token
p:none	--ods-sys-space-0
p:2	--ods-sys-space-2
p:4	--ods-sys-space-4
p:8	--ods-sys-space-8
p:12	--ods-sys-space-12
p:16	--ods-sys-space-16
p:24	--ods-sys-space-24
p:32	--ods-sys-space-32
p:48	--ods-sys-space-48
p:64	--ods-sys-space-64

Class Name	Token
px:none	--ods-sys-space-0
px:2	--ods-sys-space-2
px:4	--ods-sys-space-4
px:8	--ods-sys-space-8
px:12	--ods-sys-space-12
px:16	--ods-sys-space-16
px:24	--ods-sys-space-24
px:32	--ods-sys-space-32
px:48	--ods-sys-space-48
px:64	--ods-sys-space-64

Class Name	Token
py:none	--ods-sys-space-0
py:2	--ods-sys-space-2
py:4	--ods-sys-space-4
py:8	--ods-sys-space-8
py:12	--ods-sys-space-12
py:16	--ods-sys-space-16
py:24	--ods-sys-space-24
py:32	--ods-sys-space-32
py:48	--ods-sys-space-48
py:64	--ods-sys-space-64

Class Name	Token
pt:none	--ods-sys-space-0
pt:2	--ods-sys-space-2
pt:4	--ods-sys-space-4
pt:8	--ods-sys-space-8
pt:12	--ods-sys-space-12
pt:16	--ods-sys-space-16
pt:24	--ods-sys-space-24
pt:32	--ods-sys-space-32
pt:48	--ods-sys-space-48
pt:64	--ods-sys-space-64

Class Name	Token
pb:none	--ods-sys-space-0
pb:2	--ods-sys-space-2
pb:4	--ods-sys-space-4
pb:8	--ods-sys-space-8
pb:12	--ods-sys-space-12
pb:16	--ods-sys-space-16
pb:24	--ods-sys-space-24
pb:32	--ods-sys-space-32
pb:48	--ods-sys-space-48
pb:64	--ods-sys-space-64

Spacing

Margin

All Sides

Left-Right

Top-Bottom

Top

Bottom

Padding

All Sides

Left-Right

Top-Bottom

Top

Bottom