COC STYLEGUIDE: Typography, Buttons, Icons, Form


Typography


H1: Style 4 Big Title

H1: Style 01 - Big Title

H2: Style 05 - Headers

H3: Style 03 - Buttons or Subtitles

H4: Style 06 - Subtitles

H4: Style 06 - Subtitles - link

H5: Style 08 - Body Copy Section Title
H6: Style 11 - Captions & Charts

This is a large paragraph. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus laudantium quo veritatis facilis esse animi vel praesentium, amet, suscipit dolorum temporibus possimus voluptate? Molestias alias inventore eos ea reprehenderit officiis facilis ducimus doloribus cupiditate, reiciendis perferendis suscipit velit, delectus ut perspiciatis ab quaerat totam. Eligendi ad autem nobis reiciendis.

This is a normal paragraph. Ipsa fuga suscipit et quasi esse expedita facilis voluptate dolores itaque est, dignissimos dicta neque similique sapiente. Esse incidunt dolore animi neque, vel quis accusantium nulla dolores libero quod provident distinctio at maxime sed dolorem ipsum exercitationem. Deleniti iusto necessitatibus vel dicta nam. Obcaecati cumque reiciendis, dolorem odio laboriosam labore perspiciatis repellendus impedit, eos accusamus eveniet assumenda, fuga accusantium deserunt fugit id non quis explicabo quod harum autem cum?

Consequuntur dignissimos quae provident, voluptate sint iure velit rerum architecto doloremque blanditiis quas culpa corrupti voluptates illum aliquam sequi nostrum fugit deserunt repellat? Sunt corrupti officiis totam ut aut eveniet ex provident at, nam ratione ducimus eaque obcaecati. Dolore ullam dolorum alias explicabo, quasi provident est dignissimos enim eum debitis neque nisi asperiores incidunt! Maiores iure dolorum reiciendis laborum eius enim ipsa sed sint optio debitis, rem repellendus? Itaque quis aspernatur perferendis mollitia pariatur laboriosam, accusamus corrupti ullam, enim, saepe omnis in! Iure dolore rerum quos, officiis corrupti blanditiis, porro sunt libero veniam, eum aut totam.

Small: Style 12 - Legal & Photo Credit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non roident, sunt in culpa.

This is a blockquote. Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus soluta ratione ipsam fugit quo praesentium beatae cupiditate officia, optio rem natus fuga! Quas quos aspernatur dolor quisquam praesentium labore tempore!


Controls


Buttons

anchor as button

Icons


Menu

schedule settings shop stories team canada tokyo video video video
schedule settings shop stories team canada tokyo video video video

Nav

back forward down up menu search close check
back forward down up menu search close check

Social- Freeform

Social- Encircled

Social- Freeform (Coloured)

Social- Freeform (Coloured Encircled)

Social- Freeform (Deselected)

Social- Encircled (Deselected)

Other

gold maple leaf representing hall of fame selected favourite unselected favourite summer winter trending

Form


Error message goes here