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
NOTRE SELECTION
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
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
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
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
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.