Logo

RCOT Logo

Palette

#00958f

#00807A

#8648a1

#76408E

#000000

#EDEDED

#42C200

Typography

Hind Bold

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklm

nopqrstuvwxyz

1234567890

Hind Semibold

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklm

nopqrstuvwxyz

1234567890

Hind Medium

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklm

nopqrstuvwxyz

1234567890

Hind Bold

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklm

nopqrstuvwxyz

1234567890

Hind Light

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklm

nopqrstuvwxyz

1234567890

Heading 1 (H1) size: 45px, line-height: 54px

Heading 2 (H2) size: 35px, line-height: 40px

Heading 3 (H3) size: 30px, line-height: 36px

Heading 4 (H4) size: 28px, line-height: 27px

Paragraph (p) size: 20px, line-height: 27px

Form Hint/Breadcrumb size: 15px, line-height: 24px

Paragraph

Morbi sed ligula ac justo varius luctus. Fusce non gravida nulla. Integer lacinia neque nec purus luctus, in condimentum nunc porttitor. Praesent cursus finibus lorem eu vulputate. Nulla facilisi. Suspendisse potenti. Phasellus vel enim nunc. Nunc mollis ac risus sit amet vulputate. Maecenas condimentum felis non massa tincidunt, a elementum dui blandit. Fusce eleifend tortor non fringilla malesuada. Pellentesque a cursus leo.

In consectetur sagittis sapien, et pellentesque felis rutrum ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed nibh aliquam, finibus massa non, imperdiet nisl. Proin at fermentum arcu, sit amet semper magna. Nullam justo nulla, ullamcorper id varius ornare, imperdiet ut nulla. Vestibulum a quam risus. Nullam tincidunt interdum lacus in lacinia. In hac habitasse platea dictumst. Nulla elementum sit amet eros vel auctor. Maecenas non tortor varius, fermentum elit ut, pharetra tellus. Proin at rutrum est. Proin ac facilisis neque. Curabitur nec nisi arcu. Phasellus sit amet risus elit.

placeholder

Phasellus commodo consequat pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis elementum orci lectus. Morbi aliquam nulla vel quam pulvinar auctor. Nunc dapibus luctus pharetra. Cras vel mi maximus, imperdiet ex ut, facilisis ante. Sed sit amet risus nec metus facilisis volutpat quis eget sapien (Link). Donec consequat feugiat tellus. Phasellus euismod nisl at dolor placerat volutpat. Nunc elementum dolor at lectus luctus pulvinar. Nulla sem odio, gravida sed est et, tristique pellentesque lacus. Sed eleifend, dui ullamcorper lobortis viverra, enim sapien sollicitudin dui, quis pellentesque dui urna ut est. Pellentesque tincidunt semper venenatis.

List

Nested List

  • Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  • Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  • Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  • Unordered list placerat sem ac dui elementum, sed accumsan ex eleifend
    • Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
    • Unordered list placerat sem ac dui elementum, sed accumsan ex eleifend

Unordered List list

  • Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  • Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac

Ordered List

  1. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  2. Unordered list placerat sem ac dui elementum, sed accumsan ex eleifend
    1. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
    2. Unordered list placerat sem ac dui elementum, sed accumsan ex eleifend
    3. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
      1. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
      2. Unordered list placerat sem ac dui elementum, sed accumsan ex eleifend
      3. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
      4. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
    4. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  3. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac
  4. Unordered list lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id fermentum libero. Sed et tempus augue, ut iaculis leo. Sed ornare felis nibh, ut iaculis dui placerat ac

Buttons

primary
Normal
Hover
secondary
Normal
Hover

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin nisl cursus lectus posuere laoreet."

Breadcrumb

Pagination

Favicon

Form Elements

Checkbox

Checkbox active
Checkbox
Checkbox

Text Field

Input Field

Input Label

Select Menu

Select menuOption 1Option 2Option 3Option 4Option 5

Date Pickers

Date Pickers

Input Label

Radio Buttons

Radio button active Radio button Radio button

Upload document

Success / Error messages

Success! Your details have been submitted

Error. Please check the details you've provided

Table Component

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Row 1 lorem ipsum Row 1 lorem ipsum Row 1 lorem ipsum Link Example Link Example
Row 2 lorem ipsum Row 2 lorem ipsum Row 2 lorem ipsum Link Example Link Example
Row 3 lorem ipsum Row 3 lorem ipsum Row 3 lorem ipsum Link Example Link Example

Greyed out text box

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim massa et velit tincidunt, id pulvinar sapien congue. Aenean eget orci velit. Pellentesque et nulla sit amet nulla pretium euismod pellentesque eu dolor. Phasellus non sapien et orci ornare iaculis. Integer luctus mauris in posuere molestie. Phasellus mauris urna, tincidunt nec dui vitae, mollis scelerisque metus. Morbi bibendum ipsum id ligula ultricies, quis consequat lacus imperdiet. Vestibulum quis felis consectetur nulla vestibulum placerat. Sed nulla nisl, tempus eget facilisis sit amet, rhoncus quis eros. Aliquam ultrices a lectus in pellentesque. Duis non imperdiet ante. Pellentesque elit nisi, tincidunt ut scelerisque non, ultrices nec sem. Morbi eu molestie risus, ac sodales ex. Maecenas vitae ante sit amet orci tempor posuere. Nullam sit amet nulla id diam placerat tincidunt. Nullam porta tempus velit ac gravida.

form stepper

  • 1. Step 1 1 4
  • 2. Step 2 2 4
  • 3. Step 3 3 4
  • 4. Step 4 4 4