Welcome to the Sample Page

This page demonstrates the blocks you have available through Typewriter. It also provides instructions and formatting tips.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

# Heading One
## Heading Two
### Heading Three
#### Heading Four
##### Heading Five
###### Heading Six

Paragraph Text

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.

Emphasized text

*Emphasized text*

Bold text

**Bold text**

Bold Emphasized text

***Bold Emphasized text***

Links

Internal links are links within your website.

Internal text link

[Internal text link](/parents/get-ready-for-camp)

External links are to other websites.

External text link

[External text link](https://apple.com)

Show the full email address so people can copy & paste.

[email@address.com](mailto:email@address.com)

Telephone links will allow you to place a call from your phone or computer (if your computer is connected to a phone).

(123) 456-7890

[(123) 465-7890](tel:123-456-7890)

👋 Learn more about Markdown text links plus phone & email links.

Blockquote & Citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur Sint

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>> Excepteur Sint

Ordered List

1. List item one
2. List item two
3. List item three

1. List item one
2. List item two
3. List item three

Unordered List

• List item one
• List item two
• List item three

- List item one
- List item two
- List item three

Table

|Table|Header|
|--|--|
|Data date doot deet|Atad etad tood teed|
|Data date doot deet|Atad etad tood teed|
|Data date doot deet|Atad etad tood teed|

Text Alignment Classes

• text-left
• text-center
• text-right

Brand Colors

• Color 1

  #212D65

• Color 2

  #7FBE41

• Color 3

  #329DE4

Hero Blocks

Use Hero blocks when you want to fill the screen with a photo or background video. Keep your content brief, or just show off a big photo.

If you follow a Hero with a Divider block the Divider will be displayed immediately after the Hero with no margin. You can see them together at the top of this page.

Hero Block Classes

The classes below modify Hero blocks; they do not apply to other blocks.

Overlays

• overlay applies a transparent black overlay to the entire photo
• overlay-left applies a transparent black overlay to the left side of the hero image and constrains the content to the left
• overlay-bottom applies a transparent overlay to the bottom of the hero image and constrains the content to the bottom

Content Alignment

• content-left constrains the text to the left side of hero on desktop
• content-bottom moves the content to the bottom

Image Alignment

• image-top anchors the top of the image to the top of the block

• image-bottom anchors to the bottom

• image-top-10-percent shifts the hero image 10% down from the top

• image-top-20-percent shifts the image 20% down

• …

• image-top-90-percent shifts the image 90% down

• image-left anchors the image to the left side of the screen

• image-right anchors the image to the right edge

• image-left-10-percent shifts the image 10% off the left side of the screen

• image-left-20-percent shifts the image 20% off the left side of the screen

• …

• image-left-90-percent shifts the image 90% off the left side of the screen

Embed Block

50/50 Blocks

Similar to Hero Blocks, 50/50 Blocks can also have full-width background images.

Photo Grids

Use photo grids to break up pages and keep users enagaged.

If you remove the full-width class your photo grids will line up with paragraphs of text on your page.

Navigation Tiles

Text with Inset Photo Blocks

Text with Inset Photo (R), Original Aspect Ratio

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 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text with Inset Photo (L), Original Aspect Ratio

Utilize this space to provide more information about just how awesome Camp Royal is! You can include as much or as little text as you’d like!

FAQ, Expandable List Block

More Tips

Typewriter How-Tos

• Add files to a page
• Hide a page from search
• Redirects

General Classes

The classes below work on all blocks.

• hide will hide a block.
• hide-phone will hide a block on phones, but not on larger screens.
• full-width is applied to all blocks by default.

Next Link with Background Photo