This is an important announcement

Learn about important stuff
Summer camp texas judaea staff counselors jobs 2024.jpeg?ixlib=rails 2.1

Welcome to the Sample Page

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

Text Blocks

Here are examples of basic text, links, block quotes, lists, and tables.

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
|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.

Camp summer texas young judaea kids fun 2024 jewish overnight.jpeg?ixlib=rails 2.1

Hero Photo w/ Text & CTA

This Hero Photo with Text & Call to Action uses the full-width, full-height, overlay-bottom, and image top classes.

Hero Video w/ Text & CTA

This Hero Video with Text & Call to Action uses the full-height class, and the overlay-blue class.

Countdown bg.jpg?ixlib=rails 2.1

Count down to Summer 2024!

S1d5 chugim irp20105.jpg?ixlib=rails 2.1

Hero Photo with Text & CTA

This Hero Photo with Text & Call to Action above uses the overlay-left class.

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.

S1d2 dji 0212.jpeg?ixlib=rails 2.1
Summer camp kids fun swing texas jewish judaea 2024.jpg?ixlib=rails 2.1

Text with Photo (L), 50/50 with Background

You can also include an image for the background!

Button
S1d11 ac irp20379.jpg?ixlib=rails 2.1

Text with Photo (R), 50/50 with Background

The background image in this block is optional, and if left blank will default to white

Campers cyj kids texas overnight.jpg?ixlib=rails 2.1
Kids summer camp parents packing.jpg?ixlib=rails 2.1

Text with Photo (R), 50/50 with Background

The background image has a white overlay

Photo Grids

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

S1d2 dji 0152.jpeg?ixlib=rails 2.1
S1d12 segeltrvlbigbend mvimg 20210624 203939.jpg?ixlib=rails 2.1

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

S1d10 ac irp20261.jpg?ixlib=rails 2.1
S2d3 dji 0006.jpg?ixlib=rails 2.1
S1d15 ac irp20065.jpg?ixlib=rails 2.1
S1d16 maccabiah irp10711.jpg?ixlib=rails 2.1
S2d24 fireworks j85a8345.jpeg?ixlib=rails 2.1
S2d16 maccabiah irp20429.jpg?ixlib=rails 2.1

Columns+ Block

S1d10 ac irp20247.jpg?ixlib=rails 2.1

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.

More About A
S1d1 zirp10013.jpeg?ixlib=rails 2.1

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.

Learn About B
S2d19 army day irp20191 copy.jpg?ixlib=rails 2.1

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.

See More C

Columns of 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. 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.

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.

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.

Navigation Tiles

Text with Inset Photo Blocks

S2d22 staff caravan irp20175.jpeg?ixlib=rails 2.1

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.

S2d3 dji 0014.jpg?ixlib=rails 2.1

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

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