PRAY Library Style Guide

Version 1.1
Typography
HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Classes

heading-xxlarge

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall
Other HTML Tags

All Paragraph (HTML Tag)A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
Block Quote
  • No bullet list

  • No bullet list

  • No bullet list

  • No bullet list

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes

A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text Styles
text-style-italic
text-style-expanded
text-style-strikethrough
text-style-allcaps
text-style-nowrap
text-style-quote
text-style-2lines
text-style-3lines
text-style-muted
Text Colours
Usage
Hexa
text-color-primary
Titles and body texts on dark bg
#FFFFFF
text-color-secondary
Subtitles, footnotes & captions
#A6A8AD
text-color-tertiary
Titles and body texts on light bg
#0B0C0D
Premium texts
Text Alignment
text-align-left
text-align-center
text-align-right
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Color Scheme
Gray
Gray 100
EEEFF0
Gray 200
D0D1D5
Gray 300
B4B6BA
Gray 400
999BA0
Gray 500
7F8085
Gray 600
6C6E73
Gray 700
4B4D52
Gray 800
202124
Gray 900
191A1D
Primary
0A0B0C
Primary
Gold
E3AF4A
No items found.
No items found.
Sandy
f2ad68
No items found.
No items found.
Background Color
Usage
Hexa

.background-color-primary

Overall screen background

#0B0C0D

.background-color-secondary

Radio and Premium Card. Chips

#18191C

.background-color-tertiary

Bottom sheets

#1F2024

.background-color-white

.background-color-lightgrey

UI Elements
Form Elements - Light Mode
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Elements - Dark Mode
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons

.icon-xxsmall

.icon-xsmall

.icon-small

.icon-medium

.icon-large

.icon-xlarge

.icon-1x1-xxsmall

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Images

Image Aspect Ratio 1:1

Image Aspect Ratio 4:3

Image Aspect Ratio 3:2

Image Aspect Ratio 16:9

Spacing
Margin Direction
.margin-top
.margin-bottom
.margin-left
.margin-right
.margin-horizontal
.margin-vertical
Margin Size
.margin-0
.margin-tiny
.margin-xxsmall
.margin-xsmall
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-xxhuge
.margin-custom1
.margin-custom2
.margin-custom3
Padding Direction
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding-horizontal
.padding-vertical
Padding Size
.padding-0
.padding-tiny
.padding-xxsmall
.padding-xsmall
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
.padding-xhuge
.padding-xxhuge
.padding-custom1
.padding-custom2
.padding-custom3
Layout
Container
.container-large
.container-medium
.container-small
Max-widths
.max-width-full
.max-width-full-tablet
.max-width-full-mobile-landscape
max-width-full-mobile-portrait
.max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge
Other Classes
Responsiveness
.hide - hide on all devices
.hide-tablet - hide starting from tablet resolution
.hide-mobile-landscape - hide starting from mobile landscape resolution
.hide-mobile-portrait - hide starting from mobile portrait resolution
.hide-desktop - hide from desktop resolution
.hide-mobile-portrait - hide starting from mobile portrait resolution
.show - display on all devices
.show-tablet - display starting from tablet resolution
.show-mobile-landscape - display starting from mobile landscape resolution
.show-mobile-portrait - display starting from mobile portrait resolution
Utility
.z-index-1 - bring an element closer on the z-index, sets z-index to 1
.z-index-2 - bring an element closer on the z-index, sets z-index to 2
.align-center - sets margin left and right to auto, centers an element inside its parent div
.spacing-clean - sets all spacing to 0, including margins and padding
.div-square - creates and maintains a 1:1 dimension of a div. CSS magic
.layer - sets absolute position with 0% on all sides - add this class to a div to make it expand the entire size of the parent element, and make sure the parent div has 'position: relative'
.clickable-off - sets pointer-events to none, prevents all click and hover interaction with an element
.clickable-on - sets pointer-events to auto, enables all click and hover interaction with an element
.overflow-hidden - sets overflow to hidden
.overflow-scroll - sets overflow to scroll
.overflow-auto - sets overflow to auto
Animations
.trigger-slide-in-bottom - Animation to slide in from bottom