Style Guide

Color Palette

#352438
#a59553
#3aa0d5
#4b474c
#030303

Headings

h1.Heading

h1.Sub Heading

h2.Heading

h2.Sub Heading

h3.Heading

h3.Sub Heading

h4.Heading

h4.Sub Heading

h5.Heading
h5.Sub Heading
h6.Heading
h6.Sub Heading

Heading Sizer h1

Heading Sizer h2

Heading Sizer h3

Heading Sizer h4

Heading Sizer h5

Heading Sizer h6

<h1 class="heading-divider">Headings</h1>
<h1>h1.Heading</h1>
<h1 class="subheader">h1.Sub Heading</h1>
<h2>h2.Heading</h2>
<h2 class="subheader">h2.Sub Heading</h2>
<h3>h3.Heading</h3>
<h3 class="subheader">h3.Sub Heading</h3>
<h4>h4.Heading</h4>
<h4 class="subheader">h4.Sub Heading</h4>
<h5>h5.Heading</h5>
<h5 class="subheader">h5.Sub Heading</h5>
<h6>h6.Heading</h6>
<h6 class="subheader">h6.Sub Heading</h6>
<h3 class="h1">Heading Sizer h1</h3>
<h3 class="h2">Heading Sizer h2</h3>
<h3 class="h3">Heading Sizer h3</h3>
<h3 class="h4">Heading Sizer h4</h3>
<h3 class="h5">Heading Sizer h5</h3>
<h3 class="h6">Heading Sizer h6</h3>

Paragraphs

This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Paragraph link. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<p class="intro">This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. <a href="#">Paragraph link</a>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="http://placehold.it/350x250" class="alignright border">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="http://placehold.it/350x250" class="alignleft border">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="http://placehold.it/1200x400" class="aligntop border">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>

Aligning

Left Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Right Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Center Lorem ipsum Ut a nisl id ante tempus hendrerit.

<p class="left-align border p1"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="right-align border p1"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="center border p1"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>

Blockquotes

Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere

Optional Authors Name Optional Second Field

<blockquote>
<p class="quote">Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere </p>
<p class="cite">Optional Authors Name <span> Optional Second Field</span> </p>
</blockquote>

Typography

Italic Font

Upercase Font Decoration

Bold Font Weight

Normal Font Weight

Font Size t1

Font Size t2

Font Size t3

Font Size t4

Font Size t5

Font Size t6

Font Size t7

Font Size t8

Font Size t9

Font Size t10

<p class="italic">Italic Font</p>
<p class="caps">Upercase Font Decoration</p>
<p class="bold">Bold Font Weight</p>
<p class="regular">Normal Font Weight</p>
<p class="t1">Font Size t1</p>
<p class="t2">Font Size t2</p>
<p class="t3">Font Size t3</p>
<p class="t4">Font Size t4</p>
<p class="t5">Font Size t5</p>
<p class="t6">Font Size t6</p>
<p class="t7">Font Size t7</p>
<p class="t8">Font Size t8</p>
<p class="t9">Font Size t9</p>
<p class="t10">Font Size t10</p>

Spacing

Top Spacing

Margin Top 0
Margin Top 1
Margin Top 2
Margin Top 3
Margin Top 4
Margin Top 5
Margin Top 6
Margin Top 7
Margin Top 8
Margin Top 9
Margin Top 10
Margin Top 11

Bottom Spacing

Margin Bottom 0
Margin Bottom 1
Margin Bottom 2
Margin Bottom 3
Margin Bottom 4
Margin Bottom 5
Margin Bottom 6
Margin Bottom 7
Margin Bottom 8
Margin Bottom 9
Margin Bottom 10
Margin Bottom 11
<div class="mt0">Margin Top 0</div>
<div class="mt1">Margin Top 1</div>
<div class="mt2">Margin Top 2</div>
<div class="mt3">Margin Top 3</div>
<div class="mt4">Margin Top 4</div>
<div class="mt5">Margin Top 5</div>
<div class="mt6">Margin Top 6</div>
<h4 class="mt4 mb1">Bottom Spacing</h4>
<div class="mb0">Margin Bottom 0</div>
<div class="mb1">Margin Bottom 1</div>
<div class="mb2">Margin Bottom 2</div>
<div class="mb3">Margin Bottom 3</div>
<div class="mb4">Margin Bottom 4</div>
<div class="mb5">Margin Bottom 5</div>
<div class="mb6">Margin Bottom 6</div>

Lists

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6
  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
    1. Sub List Item 1
    2. Sub List Item 2
    3. Sub List Item 3
    4. Sub List Item 4
    5. Sub List Item 5
  5. List Item 6
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6
<ul class="bullet-a">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ul class="list-a">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>

Buttons

Disabled Button

Expanded Button

<a class="button large" href="#">Primary Large</a>
<a class="button" href="#">Primary Default</a>
<a class="button tiny" href="#">Primary Tiny</a>
<a class="button secondary large" href="#">Secondary Large</a>
<a class="button secondary" href="#">Secondary Default</a>
<a class="button secondary tiny" href="#">Secondary Tiny</a>
<a class="button tertiary large" href="#">Tertiary Large</a>
<a class="button tertiary" href="#">Tertiary Default</a>
<a class="button tertiary tiny" href="#">Tertiary Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>

Images & Text Blocks

Weekly Gatherings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit autem nihil ad debitis vero, minima. Nisi id sit a tenetur!

Ipsum quia, blanditiis nihil, beatae dolorem, maiores cupiditate eum quas fugit excepturi nostrum ea repudiandae facilis impedit ut! Perspiciatis, perferendis!

About Chosen

Ipsum quia, blanditiis nihil, beatae dolorem, maiores cupiditate eum quas fugit excepturi nostrum ea repudiandae facilis impedit ut! Perspiciatis, perferendis!

What to Expect

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit autem nihil ad debitis vero, minima. Nisi id sit a tenetur!

Ipsum quia, blanditiis nihil, beatae dolorem, maiores cupiditate eum quas fugit excepturi!

Section w/ Heading Block No Background

Optional Subtitle

Experience the World

Teaching through God's Word chapter by chapter, verse by verse.

Learn More

Pattern Background Section w/ Heading Block

Optional Subtitle

Experience the World

Teaching through God's Word chapter by chapter, verse by verse.

Background Section w/Heading Block

Optional Subtitle

Experience Fellowship

Jesus is our common ground, the foundation of our community. Join us as we seek to grow together in God's grace and love.

Learn More

Chevron Background Section w/Heading Block

Optional Subtitle

Experience Fellowship

Jesus is our common ground, the foundation of our community. Join us as we seek to grow together in God's grace and love.

Learn More

Chevron Section Header

Optional Subtitle

Experience the World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus molestiae similique laudantium sint eaque sapiente quis placeat culpa asperiores pariatur. dolor sit amet, consectetur.

Section With Heading and Negative Margin Image

Rest Assured

Children’s Ministries is provided for all kids from nursery through fifth grade at the Calvary Beaverton 10am Sunday service at Southridge High School.

Image Tab Carousel

Explore all of our uplifting ministries
Explore all of our uplifting ministries
Explore all of our uplifting ministries
Explore all of our uplifting ministries
Explore all of our uplifting ministries

Full Width CTA Right

Location Calvary Chapel Southeast Portland

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia, quasi recusandae sint labore consequuntur eum vitae quibusdam eius modi non magnam illo laudantium magni doloremque aspernatur suscipit hic officiis ex nisi officia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia, quasi recusandae sint labore consequuntur eum vitae quibusdam eius modi non magnam illo laudantium magni doloremque aspernatur suscipit hic officiis ex nisi officia.

Learn More

Full Width CTA Left

Location Calvary Chapel Southeast Portland

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia, quasi recusandae sint labore consequuntur eum vitae quibusdam eius modi non magnam illo laudantium magni doloremque aspernatur suscipit hic officiis ex nisi officia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia, quasi recusandae sint labore consequuntur eum vitae quibusdam eius modi non magnam illo laudantium magni doloremque aspernatur suscipit hic officiis ex nisi officia.

Learn More

Full Width CTA Purple

Senior Pastor Rich Jones 1

If you should have any questions regarding this ministry, please feel free to contact our Senior Pastor.

Contact:
(123) 123-1234
Email

Book Items

Women's Group

01 - Example Group Name
01 - Example Group Name Tuesdays @ 9 - 11 am View Details
02 - Example Group Name
02 - Example Group Name Tuesdays @ 9 - 11 am View Details
03 - Example Group Name
03 - Example Group Name Tuesdays @ 9 - 11 am View Details
04 - Example Group Name
04 - Example Group Name Tuesdays @ 9 - 11 am View Details
05 - Example Group Name
05 - Example Group Name Tuesdays @ 9 - 11 am View Details

Forms

<form>
<div class="row">
<div class="large-12 columns">
<label>Input Label
<input type="text" placeholder="large-12.columns">
</label>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder="large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder="large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder="large-4.columns">
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Select Box
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</label>
</div>
</div>
<div class="row row-checkbox">
<div class="large-6 columns">
<label>Choose Your Favorite</label>
<label class="input-radio">
<input type="radio" name="pokemon" value="Red" id="pokemonRed">
Red</label>
<label class="input-radio">
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
Blue</label>
</div>
<div class="large-6 columns">
<label>Check these out</label>
<label class="input-checkbox">
<input id="checkbox1" type="checkbox">
Checkbox 1</label>
<label class="input-checkbox">
<input id="checkbox2" type="checkbox">
Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Textarea Label
<textarea rows="8" placeholder="small-12.columns"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<button type="submit" class="button">Submit</button>
</div>
</div>
</form>

Block Grids

<div class="row xsmall-up-1 small-up-2 medium-up-3 large-up-4">
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="http://placehold.it/350x300" class="mb3 border"> </div>
</div>

Alerts

This is an example successful alert message that would be used for forms or login messages more info

This is an example info alert message that would be used for forms or login messages more info

This is an example warning alert message that would be used for forms or login messages more info

This is an example danger alert message that would be used for forms or login messages more info

<div class="alert alert-success">
<p>This is an example successful alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-info">
<p>This is an example info alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-warning">
<p>This is an example warning alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-danger">
<p>This is an example danger alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>

Slide Content

Slide Toggle With Link

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

More Info

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Slide Toggle With Button

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

More Info

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" href="#">More Info</a> </p>
<div class="slide-content">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
<h3>Slide Toggle With Button</h3>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#"> More Info</a>
<div class="slide-content">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>

Accordion

FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
<dl class="accordion">
<dt>FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>

Vertical Tabs

  • Tab 1
  • Tab 2
  • Tab 3

Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.

Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.

The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.

<div id="js-tabs-vertical">
<ul class="resp-tabs-list js-tabs-a">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="resp-tabs-container js-tabs-a">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>

Horizontal Tabs

  • Tab 1
  • Tab 2
  • Tab 3

Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.

Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.

The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.

<div id="js-tabs-horizontal">
<ul class="resp-tabs-list js-tabs-a resp-htabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="resp-tabs-container js-tabs-a">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
<table class="table">
<thead>
<tr>
<th width="200">Table Header</th>
<th>Table Header</th>
<th width="150">Table Header</th>
<th width="150">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>

Shortcodes

Weekly Schedule

Shortcode: [times]

Calvary Chapel Hillsboro

Times & Locations

Wednesday
Wednesday Night Service Online 7:00pm @ Calvary Chapel Worship Center directions
Youth Group (Grades 6-12) Online @ Calvary Chapel Worship Center directions
Saturday
Saturday Night Service Online 7:00pm @ Calvary Chapel Worship Center directions
Sunday
Spanish Service Online 2:30pm @ Calvary Chapel Worship Center directions
Sunday Night Service Online 6:00pm @ Calvary Chapel Worship Center directions

Social Links

Shortcode: [social]


Campus

This is controlled from theme settings.

Shortcode: [campus]

Photo of Calvary Chapel campus

Calvary Chapel Hillsboro

  • 6550 SE Alexander Street
    Hillsboro, Oregon 97123

What We Believe

Shortcode: [what-we-believe]


Prayers

Shortcode: [prayer]

Paul - Hillsboro

Please pray for my cousin's mother-in-law. She fainted and was in the hospital for 2 days and at home now being accessed for dementia.

Prayer sent July-03-2020

Paul - Hillsboro

Please pray for my co-worker's newborn baby, she was born 4 weeks early. Thanks!

Prayer sent July-03-2020

Cecelia - Banks,Oregon

Larry is growing much worse, he's on hospice. We need wisdom and direction for his overnight care. God lovingly care for him and clearly guide us.

Prayer sent June-26-2020

Kylie Rae

Please pray for a young woman who has recently been tested for cervical cancer. Pray for her mother, who came to the Lord a few days ago.

Prayer sent June-26-2020

Traci

Please be praying for me as I recently injured my sternum, once again needing the Lord's help & healing in my bones due to osteoporosis.

Prayer sent June-26-2020

Lissa

Please pray for me. I have a work situation where I am dealing with a person who is not truthful and is using politics to get what they want and attacking my reputation.

Prayer sent June-16-2020

Cecelia - Banks,Oregon

Please Lord ease Larry's pain. He's on hospice for incurable cancer. Suffering greatly with pain and feeling very sick. Help family as they support.

Prayer sent June-16-2020

Dustin

Please pray for our country.  Pray that families and neighbors will be able to do something fun this summer.

Prayer sent June-12-2020

Traci

Please pray for healing for me. I have osteoporosis and have had several fractures in my back and currently struggling with another. 

Prayer sent June-09-2020

Anonymous

Please pray for some friends who are having marital problems and spiritual battles. Please pray God will lead them to the right counselor.

Prayer sent June-09-2020


Get Involved

Shortcode: [get-involved]

This will be full width if inserted in a content block on a page.

I’m New Here

I’m New Here

If you plan to be a part of Calvary Chapel Worship Center and want to stay updated with church events and information please submit your contact information and we will add you to our internal email list.

Growth Groups

Growth Groups

Growth Groups are small fellowships of believers who meet weekly to grow spiritually, build relationships, and to minister to each other. Our vision is to get connected relationally in groups for the purpose of growing in our relationship to Jesus Christ. It’s also an opportunity to love one another and to build up and edify one another as we grow as a disciple of our Lord.

View Groups
Interested in leading a growth group? Find Out How

Summer Classes

Summer Classes

Short-term summer classes are a great way to keep connected and grow spiritually together!

View Classes
Interested in leading a summer class? Find Out How

All Serving Opportunities

All Serving Opportunities

There are a number of ministries that serve our church internally and reach out to our community where you can serve! To view a full list of ministry volunteer needs and opportunities, please click the button below.

View Serving Opportunities Get Involved

Serve in Children’s Ministry

Serve in Children’s Ministry

No experience is needed, just a heart to answer the call. We have training and curriculum prepared for you to succeed in children’s ministry.

(Note: participation dependent on background check)

Adult Volunteer Application More Information

Serve in Middle School Ministry

Serve in Middle School Ministry

If you are interested in serving as a volunteer in our Young Adults Ministry, please fill out and submit the form by clicking the button below and Jason Wilkinson will be in contact with you soon.

Serve in Middle School Ministry Volunteer

Serve in High School Ministry

Serve in High School Ministry

If you are interested in serving as a volunteer in our High School Ministry, please fill out and submit the form by clicking the button below and Jason Wilkinson will be in contact with you soon.

(Note: participation dependent on background check)

Serve in High School Ministry Volunteer

Team Leadership

Shortcode: [leadership]

This will be full width if inserted in a content block on a page.

Click or use arrows to navigate through

Growth Groups

Shortcode: [growth-groups]

Mixed Adults

Facing Our Strongholds TUESDAY – June 23, 6:30pm View Details
Getting in Step with the Holy Spirit FRIDAY – June 26, 6:30pm View Details
Getting in Step with the Holy Spirit FRIDAY – July 10, 6:30pm View Details
Mountains Moving Through Missions: The Power of Persevering Prayer THURSDAY – July 16, 6:30pm View Details
Calvary Hillsboro – World of Missions TUESDAY – July 28, 6:30pm View Details
Facing Our Strongholds THURSDAY - August 6, 6:30pm View Details
Calvary Hillsboro – World of Missions THURSDAY – August 13, 6:30pm View Details
DivorceCare Introduction TUESDAY – August 18, 6:30pm View Details
Prayer Group for the Unemployed Wednesdays, 10:00am (ongoing) View Details
Young Adults Missional Communities Sunday, Monday, Tuesday, Wednesday, Thursday (Ongoing) View Details

Women's Group

Our Many Blessings in Christ TUESDAY – July 7, 7:00pm View Details
Our Many Blessings in Christ TUESDAY – August 4, 7:00pm View Details
Prayer Connection Wednesdays, 9:00am – 10:00am (ongoing) View Details
At His Feet Prayer Ministry Wednesdays, 5:00pm – 6:00pm (ongoing) View Details
Twelve Women of the Bible Thursdays, 3:00pm (April 16 - July 2; can be joined at anytime) View Details
At His Feet Prayer Ministry Fridays, 10:00am – 11:00am (ongoing) View Details

Men's Group

Tuesday Men’s Bible Study Tuesdays, 4:40pm – 5:45pm (Ongoing) View Details
Men’s Discipleship Thursday Nights Thursdays, 7pm (Starts: July 16; ongoing can be joined at any time) View Details
My Brother’s Keeper Tuesdays, 6:00pm – 8:00pm (Ongoing) View Details
Saturday Men’s Group Saturdays, 8am (Ongoing) View Details
For Men Only Ongoing; Can be joined at anytime View Details

Recent Messages Sliders

Shortcode: [recent-messages-sliders]