ODP COMPONENTS BASIC RULES

Structure

  • Every component is a child of the wrapper section : ODP-component-wrapper
  • ODP-component-wrapper has a width of 100% of its parent, no padding, no margin, horizontaly centered

Font

  • No specific Heading styles (inherited from context)
  • Default font-size is 20px. All other font-size are relatively defined with em.
    1em = 20px / 1.1em = 22px / 0.7em = 14px

Responsive

  • THREE Breakpoints 992 > 769 > 490px

ODP-ImgFullWidth

fw1
fw1 fw1
fw1

NOTRE SELECTION

TOM FORD
fw1

IMG FULLWIDTH + TITLE BLOCK WITH OVERRIDEN CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ODP-TextFullWidth

TEXT FULL WIDTH

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

ODP-Flex/No Margin

img1

IMG LEFT 50% / TEXT RIGHT 50%

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

ODP-Flex/Margin

img1

IMG LEFT 50% / TEXT RIGHT 50%

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

ODP-Flex

img1

IMG LEFT 33% / TEXT RIGHT 33% / TEXT RIGHT 33%

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

Titre

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

ODP-Flex 2/3 | 1/3

img1

IMG LEFT 33% / TEXT RIGHT 67%

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

ODP-Flex 1/3 | 2/3 img right

TEXT LEFT 33% / IMG RIGHT 67%

Pellentesque vel luctus quam. Fusce ullamcorper magna quam, vitae pulvinar augue condimentum nec. Duis ultrices eleifend felis, ac suscipit mi euismod et. Mauris egestas mi vitae nulla malesuada, id pretium nunc consequat. Nunc facilisis purus risus, quis convallis magna feugiat a. Donec pellentesque quis tellus quis hendrerit. Quisque id ex in arcu molestie dictum. Curabitur ut augue sed purus lobortis pretium. Nunc ex est, laoreet sit amet ornare quis, interdum consequat eros.

img1