You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.
Typography
Lorem ipsum dolor sit amet
H1 — 48px
Lorem ipsum dolor sit amet ipsum dolor sit amet
H2 — 36px
Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet
H3 — 28px
Lorem ipsum dolor sit amet
H4 — 20px
Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet
H5 — 16px
Lorem ipsum dolor sit amet
H6 — 14px
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.
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.
paragraph - INHERIT from parent
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.
c-subheadline — 20px
>> Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet <<
block quote — 22px
Lorem ipsumLINKS — inherit from parent
buttons — 16px
These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.
Color
Text colors - Neutral
This is some text with a class of is--font-black
font color - black
#1c1c1c
This is some text with a class of is--font-grey-dark
font color - black
#585757
This is some text with a class of is--font-blue-dark
font color - dark blue
#1b2fb8
This is some text with a class of is--font-black
font color - white
#ffffff
This is some text with a class of is--font-black
font color - yellow
#ffe99d
This is some text with a class of is--font-purple-light
font color - purple
#953bed
Text colors - Gradients
This is some text with a class of is--font-gradient-purple
is--font-gradient-purple
GLOBAL CUTOM CSS
This is some text with a class of is--font-gradient-pink-orange
is--font-gradient-pink-orange
GLOBAL CUTOM CSS
This is some text with a class of is--font-gradient-blue-purple
is--font-gradient-blue-purple
GLOBAL CUTOM CSS
This is some text with a class of is--font-gradient-purple-blue
is--font-gradient-purple-blue
GLOBAL CUTOM CSS
Text with a class of is--font-gradient-purple-blue-diag
is--font-gradient-purple-blue-diag
GLOBAL CUTOM CSS
Text with a class of is--font-gradient-purple-blue-diag
is--font-gradient-purple-turq
GLOBAL CUTOM CSS
Main colors
is--bg-purple-main
#8000db
is--bg-grey-light
#c8c8c8
is--bg-white
#ffffff
Neutral colors
is--bg-blue-dark
#1b2fb8
is--bg-turquoise-dark
#05525e
is--bg-purple-dark
#580098
Gradients colors
is--bg-gradient-purple
is--bg-gradient-purple-pink
is--bg-gray-dark-gradient
is--bg-gradient-purple-blue
These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.
Logo
Text colors
Main LOGO Pinata black
Main LOGO pinata white
These are a few example components.
Components
FAQs, Form
this is a h1 headline inside richtext
this is a h3 headline
What’s a Rich Text element?
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.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- jksabdkabdhvqdw
- kndscbjajkbce
- sajcbkabclcn
- sdvkjbekjfbelfnqeö
- wdhqeikfbwekfbwkfwf
- sdffgsfdbd
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur
- This is some text inside of a div block.
- This is some text inside of a div block.
Global Classes used as combo classes. Add them to being able to clean classes and not delete those important ones.
Important classes
This is some text inside of a div block.
This div contains many global classes than can be applied to style elements using them as combo classes
This div contains many global classes than can be applied to style elements using them as combo classes
This is some text inside of a div block with no padding
This is some text inside of a div
block centered aligned
block centered aligned
This is some text inside aligned to the
left. Everything having this class
will be left align
left. Everything having this class
will be left align
Algorand