Testimonials-rich-blue

After Redlands I was able to ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="testimonials testimonials--rich-blue">
	<div class="testimonials__container l-container">
    <div class="l-inner">
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>

  			<div class="testimonials__items owl-carousel">

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider1" alt="" class="testimonials__item-image">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 1</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider2" alt="" class="testimonials__item-image">
  						"Testimonial #2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 2</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider3" alt="" class="testimonials__item-image">
  						"Testimonial #3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 3</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider4" alt="" class="testimonials__item-image">
  						"Testimonial #4. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 4</a></div>
  				</div>

  			</div>
  		</div>

  		<div class="testimonials__slider">
  			<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

  		</div>
  	</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="card-with-image">
  <a href="#" class="card-with-image__tile cta-tile ">
    <h3 class="cta-tile__title">Start Today</h3>
    <div class="cta-tile__body"><p>Start your education today. See upcoming courses that are available for enrollment.</p></div>
    <span href="#" class="button">Go to catalog</span>
  </a>
  <div class="card-with-image__image">
    <img src="http://jam.domain7.net/redlands/420/420/1" />
  </div>
</div>

Grid-list

Find your program

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="grid-list row row--everything">
  <div class="l-container">

    <div class="intro">
      <h3 class="intro__title">Find your program</h3>
    </div>

    <div id="program-finder"></div>

    <rl-program-search source="http://stubby.foldablestudio.com/redlands/programs"></rl-program-search>


  </div>
</div>

Testimonials

After Redlands I was able to ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="testimonials ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>

  			<div class="testimonials__items owl-carousel">

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider1" alt="" class="testimonials__item-image">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 1</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider2" alt="" class="testimonials__item-image">
  						"Testimonial #2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 2</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider3" alt="" class="testimonials__item-image">
  						"Testimonial #3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 3</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider4" alt="" class="testimonials__item-image">
  						"Testimonial #4. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 4</a></div>
  				</div>

  			</div>
  		</div>

  		<div class="testimonials__slider">
  			<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

  		</div>
  	</div>
  </div>
</div>

Grid-list static

1
2
3
4
5
6
7
8
<div class="grid-list row row--everything">
  <div class="l-container">

    <div id="program-finder"></div>


  </div>
</div>

Share

1
2
3
4
5
6
7
8
9
10
11
12
<!--
  NOTE: A simple share link generator can be found at http://www.sharelinkgenerator.com/
-->
<div class="share">
  <span class="share__title">Share This</span>
  <ul class="social">
    <li><a href="http://twitter.com/share?text=twitter+text&url=http://www.google.com&hashtags=HASHTAG" class="social__item social__item--round social__item--twitter js-social-share">Twitter</a></li>
    <li><a href="http://www.facebook.com/sharer/sharer.php?u=http://www.google.com" class="social__item social__item--round social__item--facebook js-social-share">Facebook</a></li>
    <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=http://www.google.com&title=title+of+page&source=http://www.google.com&summary=excerpt" class="social__item social__item--round social__item--linkedin js-social-share">LinkedIn</a></li>
    <li><a href="https://plus.google.com/share?url=http://www.google.com" class="social__item social__item--round social__item--google-plus js-social-share">Google+</a></li>
  </ul>
</div>

Testimonials-alt-sylvan

After Redlands I was able to ...

"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
Person Name
Person title or class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- testimonials module without a slider -->

<div class="testimonials testimonials-alt--sylvan testimonials left testimonials-alt ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
        <div class="testimonials__slider">
          <img src="http://jam.domain7.net/redlands/820/524" alt="">
        </div>
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>
  			<div class="testimonials__items">
  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</div>

More-cta-cue

Explore More
1
<div class="more-cta-cue ">Explore More</div>

Checkout-order-summary

Order Summary

COURSE ID
Principles of Financial Accounting and Reporting

Jan 10–Mar 6 2022

Mon, 6–9 PM

Online

$300

20% off $240

COURSE ID
Principles of Financial Accounting and Reporting

Jan 10–Mar 6 2022

Mon, 6–9 PM

Online

$300

Subtotal $300.00
Discount -$30.00
Taxes $32.12
Total $302.12
Continue Browsing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<div class="order-summary">
  <h3 class="order-summary__title">Order Summary</h3>
  <div class="order-summary__heading">
    <div class="order-summary__product">
      <div class="order-summary__course-id">
        COURSE ID
      </div>
      <div class="order-summary__course-name">
        Principles of Financial Accounting and Reporting
      </div>
      <div class="order-summary__course-details">
        <div class="order-summary__course-info">
          <p>Jan 10–Mar 6 2022 </p>
          <p>Mon, 6–9 PM</p>
          <p>Online</p>
        </div>
        <div class="order-summary__course-cost">
          <p class="order-summary__old-price">$300</p>
          <p class="order-summary__discount">
            <span class="order-summary__promo">20% off</span>
            <span class="order-summary__total">$240</span>
          </p>
        </div>
      </div>
      <button class="js-remove-item order-summary__remove" title="Remove Item">
        <span class="u-screen-reader">Remove Item</span>
        <i class="fas fa-trash-alt" aria-hidden="true"></i>
      </button>
    </div>
    <div class="order-summary__product">
      <div class="order-summary__course-id">
        COURSE ID
      </div>
      <div class="order-summary__course-name">
        Principles of Financial Accounting and Reporting
      </div>
      <div class="order-summary__course-details">
        <div class="order-summary__course-info">
          <p>Jan 10–Mar 6 2022 </p>
          <p>Mon, 6–9 PM</p>
          <p>Online</p>
        </div>
        <div class="order-summary__course-cost">
          <p class="order-summary__total">$300</p>
        </div>
      </div>
      <button class="js-remove-item order-summary__remove" title="Remove Item">
        <span class="u-screen-reader">Remove Item</span>
        <i class="fas fa-trash-alt" aria-hidden="true"></i>
      </button>
    </div>
    <!-- if more than 2 courses, add the remaining below -->
    <button class="order-summary__toggle js-reveal" data-target="additional-checkout-items">1 more</button>
    <div class="order-summary__additional-items js-reveal-target" id="additional-checkout-items" aria-hidden="true">
      <div class="order-summary__product">
        <div class="order-summary__course-id">
          COURSE ID
        </div>
        <div class="order-summary__course-name">
          Principles of Financial Accounting and Reporting
        </div>
        <button class="js-remove-item order-summary__remove" title="Remove Item">
          <span class="u-screen-reader">Remove Item</span>
          <i class="fas fa-trash-alt" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="order-summary__table">
    <table>
      <tbody>
        <tr>
          <th>
            Subtotal
            <span class="tooltip js-tooltip">
              <button class="tooltip__button">
                <i class="fas fa-info" aria-hidden="true"></i>
              </button>
              <span class="tooltip__content" aria-hidden="true">
                The subtotal reflects the total price of your order
                before any applicable discounts, taxes, and international
                transaction fees.
              </span>
            </span>
          </th>
          <td>$300.00</td>
        </tr>
        <tr>
          <th>Discount</th>
          <td>-$30.00</td>
        </tr>
        <tr>
          <th>Taxes</th>
          <td>$32.12</td>
        </tr>
        <tr>
          <th>Total</th>
          <td class="order-summary__total">$302.12</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="order-summary__actions">
    <div class="form__group">
      <div class="form__checkbox form-check">
        <input type="checkbox" class="form-check__control" id="terms-checkbox" aria-labelledby="checklabel3">
        <label class="form-check__label" for="terms-checkbox" id="terms-checklabel">I agree to the <a href="#">Terms and Conditions</a></label>
      </div>
    </div>
    <button class="button js-proceed-target button--disabled" disabled>Pay Now</button>
    <a href="#" class="button button--ghost">Continue Browsing</a>
  </div>
</div>

Content-accordion

  • 1. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.

    Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    Toggle Content

  • 2. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.

    Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    Toggle Content

First accordion collapsed on load

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<ul class="content-accordion" data-group-type="accordion">
  <li>
    <p> 1. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
  <li>
    <p> 2. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
</ul><!-- .panel-group -->

<h3> First accordion collapsed on load</h3>

<ul class="content-accordion is-collapsed" data-group-type="accordion">
  <li>
    <p> 1. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
  <li>
    <p> 2. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
</ul><!-- .panel-group -->

Feature-tabs

1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs   is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>

Redlands Maroon .feature-tabs--redlands-maroon

Note: the dark colour here is for demo in the library and isn't part of the variation. This variation should be used in a row or other module with a coloured background.

1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--redlands-maroon  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--deep-blue  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--rich-blue  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--sylvan  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>

Image-content-blocks

This is a title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

This is a button

This is a title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

This is a button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="full-split image-content-block">
	<div class="full-split__item full-split__item--left">
    <img src="http://jam.domain7.net/redlands/820/420/1" alt="" />
	</div>
	<div class="full-split__item full-split__item--centered-content">
		<div class="full-split__container">
			<div class="full-split__text">
				<div class="wysiwyg">
					<h2>This is a title</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
					</p>
					<a href="#" class="button">This is a button</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="full-split image-content-block ">
	<div class="full-split__item full-split__item--left">
    <img src="http://jam.domain7.net/redlands/820/420/1" alt="" />
	</div>
	<div class="full-split__item full-split__item--centered-content">
		<div class="full-split__container">
			<div class="full-split__text">
				<div class="wysiwyg">
					<h2>This is a title</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
					</p>
					<a href="#" class="button">This is a button</a>
				</div>
			</div>
		</div>
	</div>
</div>

Cta-tile

1
2
3
4
5
<a href="#" class="cta-tile ">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>
1
2
3
4
5
<a href="#" class="cta-tile t-color-2">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>
1
2
3
4
5
<a href="#" class="cta-tile t-color-3">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>
1
2
3
4
5
<a href="#" class="cta-tile t-color-8">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>
1
2
3
4
5
<a href="#" class="cta-tile t-color-11">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>
1
2
3
4
5
<a href="#" class="cta-tile t-color-12">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>
1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--deep-blue  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>

List-form

Sort by
View

Select your interests, and see the most relevant recommendations!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="program-form form">
  <form>
      <div class="form__group">
          <div>
              <div class="search__field-group">
                  <input type="text" name="search" placeholder="Search by program, degree, interest, or topic." class="form__control search__field" >
                  <button type="submit" class="search__button form__control">Search</button>
              </div>
          </div>
      </div>
  </form>
  <div class="program-form__controls">
      <div class="program-form__filters">
          <button class="button--filter button t-color-1">
              <span class="icon icon--star"></span>
              Filter
          </button>
          <button class="button--filter ">
              <span class="icon icon--star"></span>
              Customize your interests
          </button>
      </div>
      <div class="program-form__views">
          <div class="program-form__sort">
              <span>Sort by</span>
              <select name="" id="">
                  <option value="">Most Relevant</option>
                  <option value="">Newest</option>
                  <option value="">Oldest</option>
              </select>
          </div>
          <div class="program-form__layout">
              View
              <button class="button--filter is-active">
                  <span class="icon icon--list"></span>
                  <span class="screen-reader">List</span>
              </button>
              <button class="button--filter">
                  <span class="icon icon--grid"></span>
                  <span class="screen-reader">Grid</span>
              </button>
          </div>
      </div>
  </div>
</div>
<div class="program-suggestions">
  <h3 class="program-suggestions__title">Select your interests, and see the most relevant recommendations!</h3>
  <ul class="program-suggestions__tag-cloud">
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Pre-health
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Arts
          </button>
      </li>
      <li>
          <button class="is-selected">
              <span class="icon icon--minus"></span>
              Business
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Education
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Continuing Education
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Athletics
          </button>
      </li>
      <li>
          <button class="is-selected">
              <span class="icon icon--minus"></span>
              Music
          </button>
      </li>
      <li>
          <button class="is-selected">
              <span class="icon icon--minus"></span>
              Sciences
          </button>
      </li>
      <li>
          <button class="is-selected">
              <span class="icon icon--minus"></span>
              Spatial Studies
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Undergrad
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Graduate Education
          </button>
      </li>
      <li>
          <button class="is-selected">
              <span class="icon icon--minus"></span>
              Diploma
          </button>
      </li>
      <li>
          <button>
              <span class="icon icon--plus"></span>
              Mental Health
          </button>
      </li>
      <li>
          <button class="is-selected">
              <span class="icon icon--minus"></span>
              Humanities
          </button>
      </li>
  </ul>
  <button class="button">Save</button>
</div>

Cta

Default (Redlands Maroon)

Note that the containing element of this module is an a, not a div.

Sit amet consectetur

Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.

1
2
3
4
5
6
<a href="#" class="cta ">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta cta--social-media">
  <h4 class="cta__title">Find us on Facebook</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button"><i class="fa fa-facebook"></i> Visit Page</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-2">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button">Sign up now</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-3">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button">Sign up now</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-8">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button">Sign up now</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-10">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button">Sign up now</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-11">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button">Sign up now</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-12">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <div class="cta__body">
      <p>Give us a call at 1-555-555-555 or fill out this help form, and we'll give you a hand.</p>
    </div>
    <span class="button">Sign up now</span>
</a>

Row

If the body has a class of home and the first div in .l-main is a .row, negative top margin will be applied to make this row flush with the hero.
The last .row in the .l-full-content area will have bottom padding applied to give space for the footer, unless a class of .row--bottom-flush is added.

Default .row

.row is used to break apart larger sections. Background texture, photo, and gradient can be added and individually combined.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Blue texture .row--blue-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--blue-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Alder texture .row--alder-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--alder-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Camphor texture .row--camphor-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--camphor-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Deep Blue texture .row--deep-blue-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--deep-blue-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Sylvan texture .row--sylvan-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--sylvan-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Neutral texture .row--neutral-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--neutral-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Grey texture .row--grey-texture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--grey-texture" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

A shortcut for all decorations: blue texture, gradient, and default photo .row--everything

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--everything" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Neutral Background .row--neutral

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--neutral" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Neutral Background w/ gradient .row--neutral.row--gradient

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--neutral row--gradient" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Camphor Background .row--camphor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--camphor" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Alder Background .row--alder

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--alder" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Bright Grey Background .row--bright-grey

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--bright-grey" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Bright Grey Background w/ gradient .row--bright-grey.row--gradient

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--bright-grey row--gradient" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Deep Blue Background .row--deep-blue

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--deep-blue" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Sylvan Background .row--sylvan

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row row--sylvan" >
  <div class="l-container">
    <div class="intro ">
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

Testimonials-alt-alder

After Redlands I was able to ...

"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
Person Name
Person title or class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- testimonials module without a slider -->

<div class="testimonials testimonials-alt--alder testimonials left testimonials-alt ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
        <div class="testimonials__slider">
          <img src="http://jam.domain7.net/redlands/820/524" alt="">
        </div>
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>
  			<div class="testimonials__items">
  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div class="columns columns--4 columns--bordered columns--spaced">

  
<div class="image-tile columns__item columns__item--flush image-tile--deep-blue" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/524">
  <a href="#" class="image-tile__wrapper">

      <span class="tag">TagName</span>

    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle">Short Descriptor</p>

      </div>

  </a>
</div>

  
<div class="image-tile columns__item columns__item--flush image-tile--deep-blue" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/700">
  <a href="#" class="image-tile__wrapper">


    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle"></p>

      </div>

  </a>
</div>


  <div class="columns__item content-tile content-tile content-tile--deep-blue">
    <a href="" class="content-tile__wrapper">
      <div class="content-tile__body content-tile__body--center">
        <h3 class="content-tile__body-headline">This is a text content-tile title, its a little long</h3>
        <p>Deep blue variant... Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>
        <span class="button button--ghost">This is a button</span>
      </div>
    </a>
  </div>

  <div class="columns__item">
    <div class="content-tile__wrapper">
      <div class="content-tile__body content-tile__body">
        <blockquote class="quote">
  Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.
  <footer class="quote__source">
    <span class="quote__person">Person Name</span>
    <span class="quote__title">Director of directions</span>
  </footer>
</blockquote>

      </div>
    </div>
  </div>

</div>

Testimonials-alt

After Redlands I was able to ...

"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
Person Name
Person title or class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- testimonials module without a slider -->

<div class="testimonials  testimonials left testimonials-alt ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
        <div class="testimonials__slider">
          <img src="http://jam.domain7.net/redlands/820/524" alt="">
        </div>
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>
  			<div class="testimonials__items">
  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div class="thing">
  <div class="thing__child"></div>
  <a href="#" class="button ">Learn More</a>

  <a href="#" class="button button--dark">This is a large button</a>

  <a href="#" class="button ">Pass Directly</a>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<div class="proof-points proof-points__2-column">
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
</div>

Donation-form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="form donation-form">
  <form action="#">
    <div class="form__group donation-form__select">
      <select name="donation-form-select" id="donation-select" class="form__control form-select">
        <option value="false">Redlands Fund</option>
        <option value="other1">Another Fund</option>
        <option value="other2">My Pocket</option>
      </select>
    </div>
    <div class="form__group donation-form__amount amount">
      <div class="amount__wrapper">
        <input type="text" name="amount" class="form__control amount__field">
      </div>
    </div>
    <div class="form__group">
      <div class="form__checkbox form-check donation-form__monthly">
        <input type="checkbox" class="form-check__control" id="monthly-donation" aria-labelledby="monthlylabel" />
        <label class="form-check__label" for="monthly-donation" id="monthlylabel">Monthly</label>
      </div>
    </div>

    <div class="form__footer u-center-text">
      <button type="submit" class="button donation-form__button form__control">Give Now</button>
    </div>

  </form>
  <div class="donation-form__footer u-center-text">
    <a href="#target" class="donation-form__scroll-link scroll-link scroll-link--down">More ways to give</a>
  </div>
</div>

Quote

Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.
Person Name Director of directions
1
2
3
4
5
6
7
<blockquote class="quote">
  Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.
  <footer class="quote__source">
    <span class="quote__person">Person Name</span>
    <span class="quote__title">Director of directions</span>
  </footer>
</blockquote>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="image-tile image-tile--deep-blue" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/524">
  <a href="#" class="image-tile__wrapper">

      <span class="tag">TagName</span>

    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle">Short Descriptor</p>

      </div>

  </a>
</div>

Section-nav

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div class="section-nav section-nav--overview ">
      <ul class="section-nav__items">
        <li class="section-nav__item"><a href="#">About the School</a></li>
        <li class="section-nav__item"><a href="#">School of Business Admissions</a></li>
        <li class="section-nav__item"><a href="#">Student Resources</a></li>
        <li class="section-nav__item"><a href="#">Study Abroad</a></li>
        <li class="section-nav__item"><a href="#">School of Business Calendar</a></li>
        <li class="section-nav__item"><a href="#">This is another link</a></li>
        <li class="section-nav__item"><a href="#">Banta Center for Business Ethics &amp; Society</a></li>
        <li class="section-nav__item"><a href="#">Centre for Business GIS &amp; Spatial Analysis (GISAB)</a></li>
        <li class="section-nav__item"><a href="#">Office of the Dean</a></li>
        <li class="section-nav__item"><a href="#">Faculty</a></li>
      </ul> <!-- .section-nav__items -->
      <a href="#" class="js-section-nav-toggle section-nav__toggle" data-rl-expanded="Collapse">Show All</a>
 </div><!-- .section-nav -->

Sub Nav .section-nav--subnav

Sidebar Ancestor Navigation for current page

1
2
3
4
5
6
7
8
9
10
 <div class="section-nav section-nav--subnav ">
        <ul class="section-nav__items section-nav__items--no-children">
          <div class="section-nav--subnav-title section-nav__item"><a href="#">How to Apply  </a></div>
            <ul class="section-nav__items">
              <li class="section-nav__item current"><a href="#">Program Placement </a></li>
              <li class="section-nav__item"><a href="#">Apply to this program </a></li>
            </ul>
          </li>
        <ul>
 </div><!-- .section-nav -->

Table

D7 Table

Student Scores
Number First Name Last Name Points Country of Origin Starting Date
#4758692831 Eve Jackson 94 United States of America Sun Jan 10, 1993
#4758692832 John Doe 80 Eritrea Sat Jan 22, 2005
#4758692833 Adam Johnson 67 Peru Thu Feb 18, 1993
#4758692834 Jill Smith 50 Democratic Republic of the Congo Sat Jun 22, 1996

TinyMCE

Footer Footer Footer Footer
Header Header Header Header
Body Body Body Body
Body Body Body Body
Body Body Body Body
Body Body Body Body
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
  <h2>D7 Table</h2>
  <table class="table">
    <caption>Student Scores</caption>
      <tr>
        <th scope="col">Number</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Points</th>
        <th scope="col">Country of Origin</th>
        <th scope="col">Starting Date</th>
      </tr>
      <tr>
        <td>#4758692831</td>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>United States of America</td>
        <td>Sun Jan 10, 1993</td>
      </tr>
      <tr>
        <td>#4758692832</td>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>Eritrea</td>
        <td>Sat Jan 22, 2005</td>
      </tr>
      <tr>
        <td>#4758692833</td>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
        <td>Peru</td>
        <td>Thu Feb 18, 1993</td>
      </tr>
      <tr>
        <td>#4758692834</td>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>Democratic Republic of the Congo</td>
        <td>Sat Jun 22, 1996</td>
      </tr>
  </table>
<h2>TinyMCE</h2>
<div class="wysiwyg">
<table class="redlands" style="width: 426px; height: 164px;" border="0">
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
</tbody>
</table>
</div>

Card-with-image-text

Start Today

Start your education today. See upcoming courses that are available for enrollment.

Go to catalog

This program of study is offered in partnership with the University of Redlands College of Arts and Sciences (CAS) and School of Business (SB). Like to know more about CAS and SB degree programs?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="card-with-image card-with-image--text">
  <a href="#" class="card-with-image__tile cta-tile ">
    <h3 class="cta-tile__title">Start Today</h3>
    <div class="cta-tile__body"><p>Start your education today. See upcoming courses that are available for enrollment.</p></div>
    <span href="#" class="button">Go to catalog</span>
  </a>
  <div class="card-with-image__text">
    <img src="http://jam.domain7.net/redlands/420/180/1" class="card-with-image__thumbnail" />
    <div>
      <p>
        This program of study is offered in partnership with
        the University of Redlands College of Arts and Sciences (CAS)
        and School of Business (SB). Like to know more about CAS and SB
        degree programs?
      </p>
      <div class="card-with-image__links">
        <a href="#">
          Explore CAS
          <i class="fal fa-chevron-right"></i>
        </a>
        <a href="#">
          Explore SB
          <i class="fal fa-chevron-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header class="checkout-header masthead">
  <div class="checkout-header__primary">
    <div class="l-container">
      <a href="/" class="logo">
        <span class="u-screen-reader">University of Redlands</span>
      </a>
      <nav>
        <ul class="checkout-header__user-menu">
          <li>
            <button class="button button--slim checkout-header__button js-checkout-account-button" aria-controls="checkout-sub-menu">
              <span class="checkout-header__link-text">Account</span>
              <i class="fas fa-user"></i>
            </button>
            <ul class="checkout-header__sub-menu" id="checkout-sub-menu" aria-hidden="true">
              <li>
                <a href="#">Account Information</a>
              </li>
              <li>
                <a href="#">Log Out</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="button button--slim checkout-header__button">
              <span class="checkout-header__link-text">Cart</span>
              <i class="fas fa-shopping-cart"></i>
              <span class="cart-count">4</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="checkout-header__secondary">
    <div class="l-container">
      <a href="#">
        <i class="fal fa-chevron-left"></i>
        Back
      </a>
    </div>
  </div>
</header>

Testimonials-alt-camphor

After Redlands I was able to ...

"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
Person Name
Person title or class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- testimonials module without a slider -->

<div class="testimonials testimonials-alt--camphor testimonials left testimonials-alt ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
        <div class="testimonials__slider">
          <img src="http://jam.domain7.net/redlands/820/524" alt="">
        </div>
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>
  			<div class="testimonials__items">
  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</div>

Team-contact

Default .

1 profile

Get in touch with our team

Firstname Lastname

Phone: (909) 748-8074
Email: personemail@redlands.edu

More about our team
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="team-contact ">
	<h2>Get in touch with our team</h2>
	<div class="team-contact__info">
		<div class="team-contact__item">
			<img src="http://jam.domain7.net/redlands/800/524">
			<div class="wysiwyg team-contact__body">
				<h3>Firstname Lastname</h3>
				<p>Phone: (909) 748-8074<br>Email: personemail@redlands.edu</p>
			</div>
		</div>
	</div>
	<a href="#" class="button">More about our team</a>
</div>

Split .team-contact--split

2 profiles

Get in touch with our team

Firstname Lastname

Phone: (909) 748-8074
Email: personemail@redlands.edu

Firstname Lastname

Phone: (909) 748-8074
Email: personemail@redlands.edu

More about our team
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="team-contact team-contact--split">
	<h2>Get in touch with our team</h2>
	<div class="team-contact__info columns columns--2">
		<div class="team-contact__item columns__item">
			<img src="http://jam.domain7.net/redlands/800/524">
			<div class="wysiwyg team-contact__body">
				<h3>Firstname Lastname</h3>
				<p>Phone: (909) 748-8074<br>Email: personemail@redlands.edu</p>
			</div>
		</div>
		<div class="team-contact__item columns__item">
			<img src="http://jam.domain7.net/redlands/800/524">
			<div class="wysiwyg team-contact__body">
				<h3>Firstname Lastname</h3>
				<p>Phone: (909) 748-8074<br>Email: personemail@redlands.edu</p>
			</div>
		</div>
	</div>
	<a href="#" class="button">More about our team</a>
</div>

Callout-columns

Points of distinction

  • Admitted to the President's Higher Education Community Service Honor Roll

  • Ranked by Forbes in theTop 5 percent of America's Best Colleges

  • Named one of Higher Ed's"Best Kept Secrets" in the Fiske Guide to Colleges 2014

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="callout-columns">
  <div class="callout-columns__main">
    <h3 class="callout-columns__header">Points of distinction</h3>
    <ul class="callout-columns__items">
      <li class="callout-columns__item">
        <p class="callout-columns__item-text"><span class="callout-columns__key">Admitted to the</span> President's Higher Education Community Service Honor Roll</p>
      </li>
      <li class="callout-columns__item">
        <p class="callout-columns__item-text"><span class="callout-columns__key">Ranked by Forbes in the</span>Top 5 percent of America's Best Colleges</p>
      </li>
      <li class="callout-columns__item">
        <p class="callout-columns__item-text"><span class="callout-columns__key">Named one of Higher Ed's</span>"Best Kept Secrets" in the Fiske Guide to Colleges 2014</p>
      </li>
    </ul>
  </div>
  <div class="callout-columns__feature">
    <a href="#" class="cta-tile ">
  <h3 class="cta-tile__title">Student guide</h3>
  <div class="cta-tile__body"><p>Designed to help students understand what they need to know to attend Redlands.</p></div>
  <span href="#" class="button">Go to guide</span>
</a>

  </div>
</div>
1
2
3
4
5
6
7
<ul class="social">
  <li><a href="#" class="social__item social__item--round social__item--twitter">Twitter</a></li>
  <li><a href="#" class="social__item social__item--round social__item--facebook">Facebook</a></li>
  <li><a href="#" class="social__item social__item--round social__item--linkedin">LinkedIn</a></li>
  <li><a href="#" class="social__item social__item--round social__item--instagram">Instagram</a></li>
  <li><a href="#" class="social__item social__item--round social__item--youtube">YouTube</a></li>
</ul>

Button

Default Button

This is a description for the default button styles

Learn More
1
<a href="#" class="button ">Learn More</a>

Ghost Button .button--ghost

Ghost Button
1
<a href="#" class="button button--ghost">Ghost Button</a>

No Border Ghost Button .button--ghost.button--no-border

No Border Ghost Button
1
<a href="#" class="button button--ghost button--no-border">No Border Ghost Button</a>

Theme color: 1 .t-color-1

Contact us
1
<a href="#" class="button t-color-1">Contact us</a>

Theme color: 1 w/ ghost style .t-color-1.button--ghost

Contact us
1
<a href="#" class="button t-color-1 button--ghost">Contact us</a>

Slim button .button--slim

Download
1
<a href="#" class="button button--slim">Download</a>

Slim button w/ icon .button--slim

Download
1
<a href="#" class="button button--slim"><i class="fa fa-download"></i> Download</a>

Block button .button--block

Usefull for full width, possibly stacked, buttons inside of a module

Width spanning button
1
<a href="#" class="button button--block">Width spanning button</a>

Content-grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<div class="columns columns--equal-height columns--4 content-grid content-grid--news">

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid1">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item content-grid__item--tile">
    <a href="" class="content-grid__item-wrapper">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sum dolor sit amet, consectetur adipiscing elit. Tellus rhoncus ut eleifend nibh porttitor.</p>
        <span class="more-link more-link--ghost more-link--no-icon">Read More</span>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid2">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid3">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid4">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid5">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item content-grid__item--tile">
    <a href="" class="content-grid__item-wrapper">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p>
        <span class="more-link more-link--ghost more-link--no-icon">Read More</span>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item content-grid__item--tile">
    <a href="" class="content-grid__item-wrapper">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">News / TagName</span>
        <h3>This is a content headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p>
        <span class="more-link more-link--ghost more-link--no-icon">Read More</span>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            Mar 21, 2015
        </p>
      </div>
    </a>
  </div>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="columns columns--equal-height columns--4 content-grid content-grid--events">

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid1">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item content-grid__item--tile">
    <a href="" class="content-grid__item-wrapper">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sum dolor sit amet, consectetur adipiscing elit. Tellus rhoncus ut eleifend nibh porttitor.</p>
        <span class="more-link more-link--ghost more-link--no-icon">Details</span>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid2">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid3">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid4">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item">
    <a href="" class="content-grid__item-wrapper">
      <img src="http://jam.domain7.net/redlands/703/441/contentgrid5">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item content-grid__item--tile">
    <a href="" class="content-grid__item-wrapper">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p>
        <span class="more-link more-link--ghost more-link--no-icon">Read More</span>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

  <div class="columns__item content-grid__item content-grid__item--tile">
    <a href="" class="content-grid__item-wrapper">
      <div class="content-grid__item-body">
        <span class="content-grid__item-tag tag">Event / TagName</span>
        <h3>This is a content headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p>
        <span class="more-link more-link--ghost more-link--no-icon">Read More</span>
      </div>
      <div class="content-grid__item-footer">
        <p class="item-date">
            <span class="month">Mar</span> <span class="date">12</span>
        </p>
        <p class="item-description">Friday, 7PM at Orton Center and other details to make this two-lines</p>
      </div>
    </a>
  </div>

</div>

Flyout-cta

Apply now via Common Application

Clicking this will bring you to The Common Application where you can continue the application process.

1
2
3
4
5
6
 <div class="flyout-cta  ">
   <a href="#" class="flyout-cta__link">Apply now via Common Application</a>
   <div class="flyout-cta__content">
     <p>Clicking this will bring you to The Common Application where you can continue the application process.</p>
   </div>
 </div><!-- .flyout-cta -->

Content-pane

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="row row--no-padding t-color-1">
  <div class="full-split">
    <div class="full-split__item full-split__item--left full-split__item-inner">
      <div class="full-split__container">
        <div class="content-list content-list--reverse">
          <div class="content-list__container">
            <h3 class="content-list__heading">Recent News</h3>

            <rl-mini-news-events source="http://stubby.foldablestudio.com/redlands/news" class="content-list__items"></rl-mini-news-events>

            <a href="#" class="more-link more-link--uppercase">More News</a>
          </div>
        </div>
        <div class="content-list content-list--reverse content-list--events">
          <div class="content-list__container">
            <h3 class="content-list__heading">Upcoming Events</h3>

            <rl-mini-news-events source="http://stubby.foldablestudio.com/redlands/events" class="content-list__items"></rl-mini-news-events>

            <a href="#" class="more-link more-link--uppercase">More Events</a>
          </div>
        </div>
      </div>
    </div>
    <div class="full-split__item full-split__item--right content-pane" data-rl-feature-photo="http://jam.domain7.net/redlands/1400/800">
      <div class="full-split__container">
        <div class="content-pane__item">
          <span class="content-pane__item-tag tag">Feature News</span>
          <a href="#">
            <h4 class="content-pane__item-headline">This is an item</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p class="content-pane__item-date">
                March 9, 2015
            </p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Full-split-with-slider

This is a title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

This is a button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="full-split full-split--bordered">
	<div class="full-split__item full-split__item--left">
		<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1" data-caption="This is a caption #1"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2" data-caption="Maxime velit nobis possimus quisquam vel doloremque quia" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3" data-caption="Quasi autem expedita blanditiis qui velit aliquid molestias veniam cum eaque quos qui" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4" data-caption="Deleniti explicabo non sed atque sequi nulla non rerum voluptas amet quia aspernatur aut" alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

	</div>
	<div class="full-split__item full-split__item--right full-split__item--centered-content">
		<div class="full-split__container">
			<div class="full-split__text">
				<div class="wysiwyg">
					<h2>This is a title</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
					</p>
					<a href="#" class="button">This is a button</a>
				</div>
			</div>
		</div>
	</div>
</div>

Content-list

Default .

Content listing

Recent News

More News
1
2
3
4
5
6
7
8
9
10

<div class="content-list  ">
  <h3 class="content-list__heading">Recent News</h3>

  <rl-mini-news-events source="http://stubby.foldablestudio.com/redlands/news" class="content-list__items"></rl-mini-news-events>

  <a href="#" class="more-link more-link--uppercase">More News</a>
</div>

Events .content-list--events

Events listing

Upcoming Events

More Events
1
2
3
4
5
6
7
8
9
10

<div class="content-list content-list--events ">
  <h3 class="content-list__heading">Upcoming Events</h3>

  <rl-mini-news-events source="http://stubby.foldablestudio.com/redlands/events" class="content-list__items"></rl-mini-news-events>

  <a href="#" class="more-link more-link--uppercase">More Events</a>
</div>

Reverse .content-list--reverse

Reverse Text

Recent News

More News
1
2
3
4
5
6
7
8
9
10
11
12
  <div class="library-module--background library-module--background-brand">

<div class="content-list content-list--reverse ">
  <h3 class="content-list__heading">Recent News</h3>

  <rl-mini-news-events source="http://stubby.foldablestudio.com/redlands/news" class="content-list__items"></rl-mini-news-events>

  <a href="#" class="more-link more-link--uppercase">More News</a>
</div>

  </div>

Testimonials-alt-rich-blue

After Redlands I was able to ...

"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
Person Name
Person title or class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- testimonials module without a slider -->

<div class="testimonials testimonials-alt--rich-blue testimonials left testimonials-alt ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
        <div class="testimonials__slider">
          <img src="http://jam.domain7.net/redlands/820/524" alt="">
        </div>
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>
  			<div class="testimonials__items">
  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--sylvan  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>

Full-split

Left half
Right half
1
2
3
4
5
6
7
8
9
10
11
12
<div class="full-split">
	<div class="full-split__item full-split__item--left">
		<div class="full-split__container">
			Left half
		</div>
	</div>
	<div class="full-split__item full-split__item--right">
		<div class="full-split__container">
			Right half
		</div>
	</div>
</div>
1
2
3
4
<div class="faq">
	<a href="#question1" class="faq__question">Is there an application deadline?</a>
	<a href="#question2" class="faq__question">When will I recieve notice of a decision?</a>
</div>

Deep-dive

1
2
3
4
5
6
7
8
9
10
11
12
<div class="deep-dive">
  <div class="deep-dive__inner">
    <select name="deep-dive" class="js-deep-dive form-select">
      <option selected="selected">What are you interested in studying?</option>
      <option>Zoology</option>
      <option value="">English</option>
      <option value="">Science</option>
      <option value="">Philosophy</option>
      <option value="">Music</option>
    </select>
  </div>
</div>

Testimonials-sylvan

After Redlands I was able to ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="testimonials testimonials--sylvan">
	<div class="testimonials__container l-container">
    <div class="l-inner">
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>

  			<div class="testimonials__items owl-carousel">

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider1" alt="" class="testimonials__item-image">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 1</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider2" alt="" class="testimonials__item-image">
  						"Testimonial #2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 2</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider3" alt="" class="testimonials__item-image">
  						"Testimonial #3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 3</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider4" alt="" class="testimonials__item-image">
  						"Testimonial #4. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 4</a></div>
  				</div>

  			</div>
  		</div>

  		<div class="testimonials__slider">
  			<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

  		</div>
  	</div>
  </div>
</div>

Form

Example block-level help text here.

Pick one of those options

Inline form

Horizontal forms

Validation states

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<div class="form">
  <form>
    <div class="form__group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form__control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form__group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form__control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form__group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="form__help">Example block-level help text here.</p>
    </div>
    <div class="form__group">
      <textarea class="form__control" rows="5" placeholder="Textarea"></textarea>
    </div>
    <div class="form__group">
      <select class="form__control form-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="form__group">
      <select multiple="" class="form__control form-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <p class="form__help">Pick one of those options</p>
    </div>
    <div class="form__group">
      <div class="form__checkbox form-check">
        <input type="checkbox" class="form-check__control" id="check3" aria-labelledby="checklabel3" />
        <label class="form-check__label" for="check3" id="checklabel3">Remember me</label>
      </div>
      <div class="form__checkbox form-check">
        <input type="checkbox" class="form-check__control" id="check4" aria-labelledby="checklabel4" />
        <label class="form-check__label" for="check4" id="checklabel4">Send me spam all the time</label>
      </div>
    </div>
    <div class="form__group">
      <div class="form__radio form-check form-check--radio">
        <input type="radio" name="radios1" class="form-check__control" id="radio3" aria-labelledby="radiolabel3" />
        <label class="form-check__label" for="radio3" id="radiolabel3">Remember me</label>
      </div>
      <div class="form__radio form-check form-check--radio">
        <input type="radio" name="radios1" class="form-check__control" id="radio4" aria-labelledby="radiolabel4" />
        <label class="form-check__label" for="radio4" id="radiolabel4">Send me spam all the time</label>
      </div>
    </div>
    <button type="submit" class="button">Submit</button>
  </form>
</div>

<h2>Inline form</h2>
<div class="form form--inline">
  <form>
    <div class="form__group">
      <label for="exampleInputName2">Name</label>
      <input type="text" class="form__control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form__group form__group--required">
      <label for="exampleInputEmail2">Email</label>
      <input type="email" class="form__control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="button">Send invitation</button>
  </form>
</div>

<h2>Horizontal forms</h2>
<div class="form form--horizontal">
  <form>
    <div class="form__group">
      <label for="exampleInputName3">Name</label>
      <div class="form__horizontal-input">
        <input type="text" class="form__control" id="exampleInputName3" placeholder="Jane Doe">
      </div>
    </div>
    <div class="form__group form__group--required">
      <label for="exampleInputEmail3">Email</label>
      <div class="form__horizontal-input">
        <input type="email" class="form__control" id="exampleInputEmail3" placeholder="jane.doe@example.com">
      </div>
    </div>
    <div class="form__group">
      <div class="form__horizontal-input">
        <div class="form__checkbox form__checkbox--inline">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
        <div class="form__checkbox form__checkbox--inline">
          <label>
            <input type="checkbox"> Send me spam all the time
          </label>
        </div>
      </div>
    </div>
    <div class="form__group">
      <div class="form__horizontal-input">
        <div class="form__radio form__radio--inline">
          <label>
            <input type="radio"> Remember me
          </label>
        </div>
        <div class="form__radio form__radio--inline">
          <label>
            <input type="radio"> Send me spam all the time
          </label>
        </div>
      </div>
    </div>
    <div class="form__horizontal-input">
      <button type="submit" class="button">Sign in</button>
      <button type="submit" class="button button--ghost">Forgot my password</button>
    </div>
  </form>
</div>

<h2>Validation states</h2>
<div class="form form--horizontal">
  <form>
    <div class="form__group">
      <label for="exampleInputName4">Name</label>
      <div class="form__horizontal-input">
        <input type="text" class="form__control" id="exampleInputName4" placeholder="Jane Doe">
      </div>
    </div>
    <div class="form__group has-error">
      <label for="exampleInputEmail4">Email</label>
      <div class="form__horizontal-input">
        <input type="email" class="form__control" id="exampleInputEmail4" placeholder="jane.doe@example.com">
      </div>
    </div>
    <div class="form__group has-success">
      <label for="exampleInputPhone4">Phone number</label>
      <div class="form__horizontal-input">
        <input type="email" class="form__control" id="exampleInputPhone4" placeholder="jane.doe@example.com">
      </div>
    </div>
    <div class="form__group has-warning">
      <label for="exampleInputCity4">City</label>
      <div class="form__horizontal-input">
        <input type="email" class="form__control" id="exampleInputCity4" placeholder="jane.doe@example.com">
      </div>
    </div>

    <!-- Checkboxes -->
    <div class="form__group">
      <div class="form__horizontal-input">
        <div class="form__checkbox form__checkbox--inline form-check">
          <input type="checkbox" class="form-check__control" id="check1" aria-labelledby="checklabel1" />
          <label class="form-check__label" for="check1" id="checklabel1">Remember me</label>
        </div>
        <div class="form__checkbox form__checkbox--inline form-check">
          <input type="checkbox" class="form-check__control" id="check2" aria-labelledby="checklabel2" />
          <label class="form-check__label" for="check2" id="checklabel2">Send me spam all the time</label>
        </div>
      </div>
    </div>

    <!-- Radios -->
    <div class="form__group">
      <div class="form__horizontal-input">
        <div class="form__radio form__radio--inline form-check form-check--radio">
          <input type="radio" name="radios1" class="form-check__control" id="radio1" aria-labelledby="radiolabel1" />
          <label class="form-check__label" for="radio1" id="radiolabel2">Remember me</label>
        </div>
        <div class="form__radio form__radio--inline form-check form-check--radio">
          <input type="radio" name="radios1" class="form-check__control" id="radio2" aria-labelledby="radiolabel2" />
          <label class="form-check__label" for="radio2" id="radiolabel2">Send me spam all the time</label>
        </div>
      </div>
    </div>

    <div class="form__horizontal-input">
      <button type="submit" class="button">Sign in</button>
      <button type="submit" class="button button--ghost">Forgot my password</button>
    </div>
  </form>
</div>

Contact-form

Send us your question

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="form contact-form">
  <div class="contact-form__intro u-center-text">
  <h2 class="contact-form__intro-heading">Send us your question</h2>
  <p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut.</p>
  </div>
  <form class="contact-form__form">
    <div class="form__group form__group--split">
      <div class="form__split-item">
        <label for="name">Name</label>
        <input type="name" id="name" required>
      </div>
      <div class="form__split-item">
        <label for="email">Email</label>
        <input type="email" id="email" required>
      </div>
    </div>
    <div class="form__group form__group--split">
      <div class="form__split-item">
        <label for="phone">Phone (optional)</label>
        <input type="phone" id="phone">
      </div>
      <div class="form__split-item">
        <label for="area-of-interest">Area of interest (optional)</label>
        <select name="area-of-interest" id="area-of-interest" class="form__control form-select">
          <option value="">Select</option>
          <option value="other1">Other option</option>
          <option value="other2">Something else</option>
        </select>
      </div>
    </div>
    <div class="form__group">
      <label for="question">Question</label>
      <textarea name="question" rows="5"></textarea>
    </div>
    <div class="form__group form__group--footer u-center-text">
      <button type="submit" class="button">Submit</button>
    </div>
  </form>
</div>

Media

Default

Used for items with image or video with caption underneath. Usually goes inside of columns module

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">

      <h3 class="media__title">This is a title</h3>

      <div class="media__body wysiwyg">
        <p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p>
      </div>

      <a href="#" class="button">Learn more</a>

  </div> <!-- .media__content -->

 </div>

Split .media--split

This variation can go outside of columns. The image/video is on the left, and corresponding body text on the right.

Getting involved

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia.

Learn more
See Also:
  • Community Service Learning
  • Student Leadership & Involvement Center
  • Associated Students of the University of Redlands
  • Leadership Programs
  • Campus Diversity and Inclusion
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <div class="media media--split">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>Getting involved</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia.</p> <a href="#" class="more-link">Learn more</a> <h5>See Also:</h5> <ul> <li>Community Service Learning</li> <li>Student Leadership & Involvement Center</li> <li>Associated Students of the University of Redlands</li> <li>Leadership Programs</li> <li>Campus Diversity and Inclusion</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

Testimonials-camphor

After Redlands I was able to ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="testimonials testimonials--camphor">
	<div class="testimonials__container l-container">
    <div class="l-inner">
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>

  			<div class="testimonials__items owl-carousel">

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider1" alt="" class="testimonials__item-image">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 1</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider2" alt="" class="testimonials__item-image">
  						"Testimonial #2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 2</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider3" alt="" class="testimonials__item-image">
  						"Testimonial #3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 3</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider4" alt="" class="testimonials__item-image">
  						"Testimonial #4. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 4</a></div>
  				</div>

  			</div>
  		</div>

  		<div class="testimonials__slider">
  			<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

  		</div>
  	</div>
  </div>
</div>

Hero

Homepage Hero .hero--homepage

An example with 3 image slides.

Section title

Lorem ipsum dolor sit amet consecteteur adipscing.
Click Here
Explore programs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="hero hero--homepage ">
	<div class="hero__items">








      <div class="hero__item" data-rl-image="http://jam.domain7.net/redlands/1440/800/" >
        <div class="hero__item-content-container">
          <div class="hero__item-content">
            <div class="page-title">
              <h1 class="page-title__name">Section title</h1>
              <div class="page-title__subtitle">
                Lorem ipsum dolor sit amet consecteteur adipscing.
              </div>
              <a href="#" class="button--square">Click Here</a>
            </div><!--page-title-->
          </div>
          <div class="more-cta-cue">
            Explore programs
          </div>
				</div><!--hero__item-content-container-->
      </div> <!--hero__item-->

  </div> <!--hero__items-->

	<div class="hero__decoration"></div>
</div>

Video Hero .hero--video

A hero with a single video and an image fallback

Welcome to a bigger impact

University of Redlands

Explore programs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="hero hero--video ">
	<div class="hero__items">








		<div class="hero__item" data-rl-mp4="/video/sample-hero-video.mp4" data-rl-webm="/video/sample-hero-video.webm" data-rl-thumb="http://jam.domain7.net/redlands/150/150/hero/1" data-rl-image="http://jam.domain7.net/redlands/1440/900/hero/1">
			<div class="hero__item-content-container">
				<div class="hero__item-content">
					<div class="hero__item-heading">
						<h1>Welcome to a bigger impact</h1>
            <h2>University of Redlands</h2>
					</div>
					<div class="hero__item-body">
						<a href="#" class="button">This is a button</a>
					</div>
				</div>
				<div class="more-cta-cue">
					Explore programs
				</div>
			</div>
		</div>



  </div> <!--hero__items-->

	<div class="hero__decoration"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="#" class="proof-point-feature__outer-link proof-point-feature--alt l-container">
  <div class="proof-point-feature proof-point-feature--alt">
      <div class="proof-point-feature--alt__media ">
        <img src="http://jam.domain7.net/redlands/820/524" alt="">
      </div>
    <div class="proof-point-feature__content proof-point-feature--alt__content">
      <h3 class="testimonials__heading">Gorgeous campus</h3>
      <div class="testimonials__text proof-point-feature--alt__text">
        <p>Orange groves, architectural landmarks, and 160 acres of open beauty in Southern California.</p>
      </div>
      <span class="more-link">Learn more</span>
    </div>
  </div>
</a>

School-intro

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis.

amet, consectetur adipiscing elit. Sed posuere consectetu Sed posuere consecteturSed posuere consectetur

Vivamus sagittis lacus vel augue laoreet

Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="school-intro l-container">
  <div class="school-intro__content">
    <div class="school-intro__content-text">
      <h2 class="intro-title">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</h2>
        <p> Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.
        Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Maecenas sed diam eget
        risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus
         commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.
         Nulla vitae elit libero, a pharetra augue.Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit
         amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
         Sed posuere consectetur est at lobortis.</p>
    </div>
    <div class="school-intro__content-image">
      <figure>
        <img src="http://jam.domain7.net/redlands/1240/840/slider1" alt="" />
        <figcaption> amet, consectetur adipiscing elit. Sed posuere consectetu Sed posuere consecteturSed posuere consectetur </figcaption>
      </figure>
    </div>
    <div class="school-intro__content-text">
      <h2 class="intro-title">Vivamus sagittis lacus vel augue laoreet </h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.
        Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Maecenas sed diam eget
        risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus
      </p>
    </div>
  </div>
</div>

Checkout-accordion

Step 1: Sign Up or Log In
Content Section
Step 1: Sign Up or Log In

You will need an account to checkout and enroll in all classes. Sign up or log in to complete checkout and enroll.

Sign Up

By registering, I agree to the University of Redlands Privacy Policy and the Terms of Use

Log In

Step 1: Sign Up or Log In

john.smith@email.com

••••••••••••••

Step 2: Your Information
Step 2: Your Information

Saved Addresses

Step 2: Your Information

John Smith
1987-10-05
555-555-5555

123 Carol Drive
San Francisco, CA
13245

Step 3: Billing Address

John Smith

123 Carol Drive
San Francisco, CA
13245

Step 4: Payment
Step 4: Payment

* Please note that early bird discounts do not apply when using a coupon code and, in some cases, may result in a smaller discount.

Credit Card Details

Step 4: Payment

John Smith

••••• •••••• 99476
09/27
•••

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
<div class="checkout-section checkout-section--closed">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-right"></i>
    Step 1: Sign Up or Log In
  </div>
  <div class="checkout-section__content">
    Content Section
  </div>
</div>

<div class="checkout-section checkout-section--open">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-down"></i>
    Step 1: Sign Up or Log In
  </div>
  <div class="checkout-section__content">
    <div>
      <p>You will need an account to checkout and enroll in all classes. Sign up or log in to complete checkout and enroll.</p>
    </div>
    <div class="panel-group js-panel-group" data-group-type="tabs">
      <div class="panel-group__item">
        <h4 class="panel-group__header">Sign Up</h4>
        <div class="panel-group__content">
          <form>
            <div class="form">
              <div class="form__group">
                <label for="signup-email">Email address</label>
                <input type="email" class="form__control" id="signup-email" name="signup-email">
              </div>
              <div class="form__group">
                <label for="signup-password">Password</label>
                <input type="password" class="form__control" id="signup-password" name="signup-password">
              </div>
              <div class="form__group">
                <label for="signup-password-confirm">Confirm Password</label>
                <input type="password" class="form__control" id="signup-password-confirm" name="signup-password-confirm">
              </div>
            </div>
            <div class="checkout-section__signup-legend">
              <div class="checkout-section__signup-params">
                <p>Must Include:</p>
                <ul>
                  <li>
                    <i class="far fa-times"></i>
                    1 Uppercase letter
                  </li>
                  <li>
                    <i class="far fa-times"></i>
                    1 Special Character
                  </li>
                  <li>
                    <i class="far fa-times"></i>
                    1 Numerical Character
                  </li>
                </ul>
              </div>
            </div>
            <div>
              <p>
                By registering, I agree to the University of Redlands <a href="">Privacy Policy</a> and the <a href="">Terms of Use</a>
              </p>
              <button class="button" type="submit">Sign Up</button>
            </div>
          </form>
        </div>
      </div>
      <div class="panel-group__item">
        <h4 class="panel-group__header">Log In</h4>
        <div class="panel-group__content">
          <form>
            <div class="form">
              <div class="form__group">
                <label for="signup-email">Email address</label>
                <input type="email" class="form__control" id="signup-email" name="signup-email">
              </div>
              <div class="form__group">
                <label for="signup-password">Password</label>
                <input type="password" class="form__control" id="signup-password" name="signup-password">
              </div>
            </div>
            <div class="form__action">
              <button class="button" type="submit">Log In</button>
            </div>
          </form>
        </div>
      </div>
    </div><!-- .panel-group -->
  </div>
</div>

<div class="checkout-section checkout-section--complete">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-check-circle"></i>
    Step 1: Sign Up or Log In
    <button class="checkout-section__edit-button">Edit <i class="far fa-angle-right"></i></button>
  </div>
  <div class="checkout-section__content">
    <div>
      <p>john.smith@email.com</p>
      <p>••••••••••••••</p>
    </div>
  </div>
</div>


<div class="checkout-section checkout-section--closed">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-right"></i>
    Step 2: Your Information
  </div>
  <div class="checkout-section__content">

  </div>
</div>

<div class="checkout-section checkout-section--open">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-down"></i>
    Step 2: Your Information
  </div>
  <div class="checkout-section__content">
    <form>
      <!-- if this the billing address step -->
      <div class="form__group">
        <div class="form__checkbox form-check">
          <input type="checkbox" class="form-check__control" id="same-as-mailing" aria-labelledby="same-as-mailing" />
          <label class="form-check__label" for="same-as-mailing">Same as address in Step 2: Your Information</label>
        </div>
      </div>
      <div class="form">
        <div class="form__group">
          <label for="first-name">First Name</label>
          <input type="text" class="form__control" id="first-name" name="first-name">
        </div>
        <div class="form__group">
          <label for="last-name">Last Name</label>
          <input type="text" class="form__control" id="last-name" name="last-name">
        </div>
        <div class="form__group">
          <label for="dob">Date of Birth</label>
          <div class="datepicker">
            <input type="text" name="dob" id="dob" class="form__control js-datepicker" autocomplete="off">
          </div>
        </div>
        <div class="form__group">
          <label for="phone">Phone</label>
          <input type="tel" class="form__control" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
        </div>
        <div class="form__group">
          <label for="country">Country</label>
          <select class="form__control form-select" id="country" name="country">
            <option>USA</option>
            <option>Canada</option>
            <option>UK</option>
            <option>Australia</option>
            <option>New Zealand</option>
          </select>
        </div>
        <div class="form__group">
          <label for="address">Address line 1</label>
          <input type="text" class="form__control" id="address" name="address">
        </div>
        <div class="form__group">
          <label for="city">City</label>
          <input type="text" class="form__control" id="city" name="city">
        </div>
        <div class="form__group">
          <label for="State">State</label>
          <select class="form__control form-select" id="country" name="state">
            <option>Alaska</option>
            <option>Alabama</option>
            <option>Arizona</option>
            <option>Arkansas</option>
            <option>California</option>
            <option>Colorado</option>
          </select>
        </div>
        <div class="form__group">
          <label for="zip">Zip</label>
          <input type="text" class="form__control" id="zip" name="zip">
        </div>
      </div>
      <div class="form-group">
        <p>Saved Addresses</p>
        <div class="address-select">
          <div class="address-select__current">
            <button type="button" aria-controls="address-options" class="address-select__button js-address-toggle">
              123 Carol Drive, San Fransisco, CA 123456 USA
            </button>
            <i class="fas fa-caret-down"></i>
          </div>
          <ul class="address-select__options" aria-hidden="true" id="address-options">
            <li>
              <button type="button"  class="address-select__button js-select-address">
                123 Carol Drive, San Fransisco, CA 123456 USA
              </button>
            </li>
            <li>
              <button type="button" class="address-select__button js-select-address">
                4564 Sunset Drive, San Fransisco, CA 123456 USA
              </button>

            </li>
            <li>
              <button type="button" class="address-select__button address-select__button--add  js-add-address">
                <i class="fal fa-plus"></i>
                Add New Address
              </button>
            </li>
          </ul>
          <div>
            <button type="button" class="button button--ghost">Edit</button>
          </div>
        </div>
        <button type="submit" class="button">Save and Continue</button>
      </div>
    </form>
  </div>
</div>

<div class="checkout-section checkout-section--complete">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-check-circle"></i>
    Step 2: Your Information
    <button class="checkout-section__edit-button">Edit <i class="far fa-angle-right"></i></button>
  </div>
  <div class="checkout-section__content">
    <div class="flex">
      <div>
        <p>
          John Smith <br />
          1987-10-05 <br />
          555-555-5555
        </p>
      </div>
      <div>
        <p>
          123 Carol Drive <br />
          San Francisco, CA <br />
          13245
        </p>
      </div>
    </div>
  </div>
</div>

<div class="checkout-section checkout-section--complete">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-check-circle"></i>
    Step 3: Billing Address
    <button class="checkout-section__edit-button">Edit <i class="far fa-angle-right"></i></button>
  </div>
  <div class="checkout-section__content">
    <div class="flex">
      <div>
        <p>
          John Smith
        </p>
      </div>
      <div>
        <p>
          123 Carol Drive <br />
          San Francisco, CA <br />
          13245
        </p>
      </div>
    </div>
  </div>
</div>


<div class="checkout-section checkout-section--closed">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-right"></i>
    Step 4: Payment
  </div>
  <div class="checkout-section__content">

  </div>
</div>

<div class="checkout-section checkout-section--open">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-down"></i>
    Step 4: Payment
  </div>
  <div class="checkout-section__content">
    <form>
      <div class="promo-group">
        <div class="form__group">
          <label for="name">Promo Code</label>
          <input type="text" class="form__control" id="name" name="name">
          <div class="button-group">
            <button type="button" class="button button--ghost">Apply Code</button>
            <button type="button" class="button button--ghost button--no-border">Remove Code</button>
          </div>
        </div>
        <div>
          <p class="small-text">
            * Please note that early bird discounts do not apply when
            using a coupon code and, in some cases, may result in
            a smaller discount.
          </p>
        </div>
      </div>
      <div class="form">
        <h4>Credit Card Details</h4>
        <div class="form__group">
          <label for="name">Name on Card</label>
          <input type="text" class="form__control" id="name" name="name">
        </div>
        <div class="form__group">
          <label for="card-number">Card Number</label>
          <input type="text" class="form__control" id="card-number" name="card-number">
        </div>
        <div class="form__group">
          <label for="expiry">MM/YY</label>
          <div class="datepicker">
            <input type="text" name="expiry" id="expiry" class="form__control js-datepicker" autocomplete="off">
          </div>
        </div>

        <div class="form__group">
          <label for="cvv">CVV</label>
          <input type="text" class="form__control" id="cvv" name="cvv">
        </div>

        <button type="submit" class="button">Review Order</button>
      </div>
    </form>
  </div>
</div>

<div class="checkout-section checkout-section--complete">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-check-circle"></i>
    Step 4: Payment
    <button class="checkout-section__edit-button">Edit <i class="far fa-angle-right"></i></button>
  </div>
  <div class="checkout-section__content">
    <div class="flex">
      <div>
        <p>
          John Smith
        </p>
      </div>
      <div>
        <p class="flex">
          <span class="checkout-section__cc-label">
            <i class="fab fa-cc-mastercard"></i>
            <i class="fab fa-cc-visa"></i>
            <i class="fab fa-cc-amex"></i>
          </span>
          <span class="checkout-section__cc-info">
            ••••• •••••• 99476 <br />
            09/27 <br />
            •••
          </span>
        </p>
      </div>
    </div>
  </div>
</div>

Kitchen-sink

HTML Ipsum Presents

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}

Tristique Malesuada Elit

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

Magna Vehicula Risus

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

Vehicula Parturient Bibendum

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

<h4>Tristique Malesuada Elit</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

<h5>Magna Vehicula Risus</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

<h6>Vehicula Parturient Bibendum</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="card-with-image card-with-image--text">
  <div class="card-with-image__pdf">
    <div class="card-with-image__pdf-content">
      <h3 class="card-with-image__pdf-heading"><i class="fas fa-file-pdf"></i> PDF Version</h3>
      <a href="#" class="button" download>Download <i class="fas fa-download"></i></a>
    </div>
    <div class="card-with-image__pdf-cover">
      <img src="https://www.redlands.edu/globalassets/scs-catalog-21-22.jpg" />
    </div>
  </div>
  <a href="#" class="card-with-image__tile cta-tile ">
    <h3 class="cta-tile__title">Online Catalog</h3>
    <div class="cta-tile__body"><p>See all currently available courses and programs and register online.</p></div>
    <span href="#" class="button">Go to catalog</span>
  </a>
</div>

Location-map

Location map .location-map

The location map is created by providing two data attributes: data-rl-map-lat and data-rl-map-long for latitude and longitude.

1
<div class="location-map" data-rl-map-lat="34.062935" data-rl-map-long="-117.163804"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div class="columns columns--4 columns--bordered columns--spaced">

  
<div class="image-tile columns__item columns__item--flush" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/524">
  <a href="#" class="image-tile__wrapper">

      <span class="tag">TagName</span>

    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle">Short Descriptor</p>

      </div>

  </a>
</div>

  
<div class="image-tile columns__item columns__item--flush" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/700">
  <a href="#" class="image-tile__wrapper">


    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle"></p>

      </div>

  </a>
</div>


  <div class="columns__item content-tile content-tile">
    <a href="" class="content-tile__wrapper">
      <div class="content-tile__body content-tile__body--center">
        <h3 class="content-tile__body-headline">This is a text content-tile title, its a little long</h3>
        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>
        <span class="button button--ghost">This is a button</span>
      </div>
    </a>
  </div>

  <div class="columns__item">
    <div class="content-tile__wrapper">
      <div class="content-tile__body content-tile__body">
        <blockquote class="quote">
  Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.
  <footer class="quote__source">
    <span class="quote__person">Person Name</span>
    <span class="quote__title">Director of directions</span>
  </footer>
</blockquote>

      </div>
    </div>
  </div>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="image-tile " data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/524">
  <a href="#" class="image-tile__wrapper">

      <span class="tag">TagName</span>

    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle">Short Descriptor</p>

      </div>

  </a>
</div>

Grid-form

Your search returned 40 results. Reset search filters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="form grid-form">
  <form action="#">
    <div class="form__group grid-form__input">
      <select name="program-search-type" id="program-search" class="form__control form-select">
        <option value="false">Event categories</option>
        <option value="other1">Other option</option>
        <option value="other2">Something else</option>
      </select>
    </div>
    <div class="form__group grid-form__input">
      <div class="search">
        <div class="search__field-group">
          <input type="text" name="search" placeholder="Search events" class="form__control search__field">
          <button type="submit" class="search__button form__control">Search</button>
        </div>
      </div>
    </div>
    <div class="form__group grid-form__input">
      <div class="search__field-group datepicker">
        <input type="text" name="search" placeholder="Search by date" class="form__control js-datepicker" autocomplete="off">
      </div>
    </div>
  </form>
  <p class="grid-form__summary">Your search returned 40 results. <a href="#">Reset search filters</a>.</p>
</div>

Facts

Note: the class facts__item--full can be added to a .facts__item to make that item span the full width of the row.

At a glance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem enim iusto, corporis id amet qui aperiam sit rem ipsam consequatur veniam voluptates officia, minima doloribus mollitia repellat ratione sint dolorem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="facts">
  <div class="facts__intro">
    <h3 class="facts__title">At a glance</h3>
    <div class="facts__description">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem enim iusto, corporis id amet qui aperiam sit rem ipsam consequatur veniam voluptates officia, minima doloribus mollitia repellat ratione sint dolorem.</p>
    </div>
  </div>
  <ul class="facts__items">

    <li class="facts__item"><span class="facts__key">Lorem ipsum</span><span class="facts__value">1234</span></li>
    <li class="facts__item"><span class="facts__key">Lorem ipsum</span><span class="facts__value">1234</span></li>
    <li class="facts__item"><span class="facts__key">Lorem ipsum</span><span class="facts__value">1234</span></li>
    <li class="facts__item"><span class="facts__key">Tellus Porta Amet Nibh</span><span class="facts__value">1234</span></li>
    <li class="facts__item facts__item--full"><span class="facts__key">Lorem ipsum</span><span class="facts__value">1234</span></li>
    <li class="facts__item"><span class="facts__value">1234</span><span class="facts__key">Lorem ipsum</span></li>
    <li class="facts__item"><span class="facts__value">1234</span><span class="facts__key">Lorem ipsum</span></li>
    <li class="facts__item"><span class="facts__value">1234</span><span class="facts__key">Lorem ipsum</span></li>
    <li class="facts__item"><span class="facts__key">Lorem ipsum</span><span class="facts__value">1234</span></li>
    <li class="facts__item facts__item--full">
      <span class="facts__key">Location</span>
      <span class="facts__value"><a href="#">Redlands</a></span>
    </li>
    <li class="facts__item facts__item--full">
      <span class="facts__key">Scholarships &amp; discounts available</span>
      <span class="facts__text"><a href="#">Military Tuition Discount</a>, <a href="#">Yellow Ribbon Award</a>, <a href="#">Corporate and Education Partnership Discount</a>, <a href="#">Rawding Scholarship</a>, <a href="#">Matich Scholarship</a>, <a href="#">Mozley Scholarship</a></span>
    </li>

    
  </ul>
</div>

Slider

Regular slider

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1" data-caption="This is a caption #1"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2" data-caption="Impedit pariatur consequatur aut numquam maxime sed porro veniam facere animi maxime vel" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3" data-caption="Commodi quo iste est aut enim eum et impedit possimus rem ea rerum et" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4" data-caption="Nemo nemo ut sed similique ut molestiae consequatur beatae sed ut et qui sint" alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

Image-cta

Default (Redlands Maroon) .

Black text on grey background

Applying as an Undergraduate?

Dolorem reiciendis et quas quam non autem consectetur voluptatem. Ut odit quasi accusantium. Architecto voluptatem ea est quia. Quisquam excepturi et eius neque veritatis laborum dolor hic eveniet et quidem mollitia aspernatur

How to apply

Undergraduate Programs

Tenetur nam ipsum ut illum laboriosam officia ea eum soluta quidem. Itaque esse perferendis sed eveniet expedita dolor ut consequatur ipsa totam. Eligendi sunt recusandae perferendis facilis incidunt quidem odit inventore

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta ">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Voluptas dolorum itaque nostrum corrupti illo aliquid accusantium ipsum explicabo occaecati eum. Vero nisi eius illum sequi sequi dicta voluptatem qui voluptatem. Quia est vel et. In aut odit optio commodi repellendus hic eaque unde impedit fugit veritatis quia</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Ut non ipsum non inventore. Et eum sapiente facilis officiis distinctio sed magni consequatur asperiores numquam voluptates laboriosam velit facere. Harum ut possimus eos culpa id voluptatibus</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 3 .t-color-3

Applying as an Undergraduate?

Voluptas tenetur dolorem et veniam qui corrupti. Aperiam quod aliquam non. Cumque nemo nobis ab asperiores omnis qui laudantium consequuntur illo velit aut quasi assumenda vero. Ullam qui nisi itaque omnis expedita est in nam dolore enim aut dolores sint tenetur

How to apply

Undergraduate Programs

Eum sint sapiente in quis voluptates rerum quo. Et sed placeat blanditiis vel expedita quia a. Enim est praesentium sequi

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta t-color-3">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Repellat quod rerum quae autem sit odio incidunt. Aut exercitationem voluptas magni vitae facere alias perspiciatis. Vitae sed repellendus consectetur qui deleniti aut laboriosam voluptatem minima quidem nihil est. Numquam sunt quae architecto eos quo minus quia aut enim non nihil ut ipsam</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Ab maiores veritatis culpa architecto cumque et ea iusto et mollitia modi est voluptatem deleniti. Quos occaecati ea rerum aut quibusdam reiciendis vero hic similique iste. Aperiam aut saepe et at laudantium omnis corporis deleniti similique architecto velit amet voluptates nihil</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 6 (Camphor) .t-color-6

Applying as an Undergraduate?

Mollitia quisquam dolor nesciunt maxime dolore nulla unde ea ratione adipisci. Animi consequatur consequatur et rerum repudiandae. Libero optio aperiam dolorem numquam optio omnis et non cupiditate animi molestiae voluptatum. Commodi temporibus doloremque nam tenetur

How to apply

Undergraduate Programs

Dicta facere odit eos maxime qui et fuga quia laudantium sit fugiat facilis id nobis. Vel dolorem corrupti aut accusantium voluptatem sit ea aut id eos. Impedit autem qui officiis voluptas in voluptate similique exercitationem

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta t-color-6">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Unde non soluta sunt hic nihil dignissimos dolor nesciunt animi qui. Vero aliquid laborum et occaecati. Possimus aut sint eius sunt eligendi. Cumque porro dolorum aut voluptatum eius suscipit voluptatibus</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Incidunt voluptates officiis repellat repellendus perferendis rerum voluptas culpa aspernatur. Enim omnis harum voluptates exercitationem sit non nemo. Aperiam vel ut est perspiciatis facere soluta rem adipisci saepe vel enim</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 7 (Alder) .t-color-7

Applying as an Undergraduate?

Quia in quia optio beatae ea. Nam similique delectus itaque assumenda voluptatem fuga omnis. Numquam quis asperiores non qui placeat nisi odit totam voluptas omnis in quia. Omnis illum non nihil

How to apply

Undergraduate Programs

Nostrum velit aut sed natus occaecati sequi sit est saepe expedita. Sit ut perferendis quisquam alias eius dolor aperiam libero alias labore optio cumque atque. Temporibus qui nihil quaerat repellat omnis et quo exercitationem ullam voluptatem maxime sequi quia

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta t-color-7">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Qui tenetur dignissimos ut vero architecto nostrum commodi eligendi repudiandae. Sequi at officia consequuntur. Sit reprehenderit laudantium soluta rem tempore labore cupiditate optio accusantium et aut nostrum fugit labore. Assumenda dolor et soluta qui nobis animi iure animi ut cupiditate totam nulla</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Qui perspiciatis fuga velit tenetur deleniti ipsam molestiae commodi quia nihil error eum exercitationem eum. Et delectus qui quaerat et. Sint quia tempora in voluptas vel iste in pariatur recusandae eius praesentium temporibus hic</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 8 (Sylvan) .t-color-8

Applying as an Undergraduate?

Doloribus rerum vel amet sit quia rerum dolorem ut quia et. Et excepturi doloremque dolor nesciunt hic earum odit quaerat molestiae id soluta ut consequatur qui. Enim qui est unde aut quo ut distinctio repudiandae. Quo asperiores hic quos cumque corporis temporibus repellendus quasi

How to apply

Undergraduate Programs

Non ab modi dicta. Perspiciatis nihil explicabo dolores quo nobis beatae atque aspernatur ex minima. Cum neque inventore asperiores necessitatibus vel ut dolorum voluptas dolore at deleniti iste cum

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta t-color-8">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Ut qui dolorem fuga tempore porro numquam consequatur molestiae sint minus voluptate voluptates consectetur. Qui vel minus molestiae est qui dignissimos. Odit laudantium sed velit quia praesentium officia ab laboriosam accusamus eveniet. Iste non odio necessitatibus qui veritatis aliquid ducimus ut at accusamus</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Adipisci possimus quis nemo reprehenderit odit non amet placeat cupiditate reiciendis ab sit hic rerum. Ab harum tempora ea sed ut iste optio aut adipisci. Molestiae qui nulla quaerat temporibus reprehenderit</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 11 (Deep Blue) .t-color-11

Applying as an Undergraduate?

Animi possimus vero optio hic a iusto nesciunt sint et quos veniam illum non. Omnis corrupti magni perspiciatis asperiores earum qui corporis et amet sint ad. Voluptatibus consectetur quis minus maxime voluptatem enim repudiandae voluptatem debitis aspernatur. Accusamus saepe commodi quaerat libero aliquid ab et aut

How to apply

Undergraduate Programs

Minima nisi recusandae natus minus id voluptas et quia reiciendis dolores cumque. Aut expedita quisquam quasi. Quasi odio soluta nisi laborum repudiandae qui voluptas voluptatem sed et

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta t-color-11">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Dicta voluptas ut sint non facilis aut. Magnam molestiae et velit consequatur culpa et voluptatum doloribus ut. Vitae necessitatibus nihil quia quis ea. Perferendis perspiciatis reiciendis accusamus nihil est distinctio quasi neque quo ipsa porro</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Provident explicabo quo nihil impedit omnis omnis. Accusamus in ut quo enim et et consectetur voluptatem. Sed quo ut reprehenderit est et magni optio reiciendis</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 12 (Rich Blue) .t-color-12

Applying as an Undergraduate?

Iure facere sed minus fuga et quam nisi quos dolor sunt molestiae quo iusto ipsum. Veritatis fugit et consectetur facere beatae atque ab nesciunt ratione dolores cupiditate nisi inventore occaecati. Esse natus molestiae aut et nihil est consequatur qui quasi rerum culpa aut. Dolores vero quidem maxime eos maxime

How to apply

Undergraduate Programs

Harum distinctio voluptatum accusantium officiis distinctio quas repellendus aut aperiam numquam temporibus ab eum fugit. Itaque distinctio itaque eos est facere quaerat est qui aut maxime quia. Eum officiis soluta dolores et

Learn more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="image-cta t-color-12">
  <div class="image-cta__split">
    <div class="image-cta__image" style="background-image: url(http://jam.domain7.net/redlands/820/525)">
    </div>
    <div class="image-cta__cta image-cta__cta--accent">
      <div class="image-cta__content">
        <div class="wysiwyg">
          <h2>Applying as an Undergraduate?</h2>
          <p>Aut mollitia earum esse fugiat non qui. Quidem et omnis exercitationem non incidunt enim assumenda. Eaque repudiandae minima cupiditate debitis animi ratione omnis. Velit placeat corporis architecto qui maiores voluptatem quod quam officiis molestiae temporibus</p>
          <a href="#" class="button">How to apply</a>
        </div>
      </div>
    </div>
  </div>
  <div class="image-cta__caption">
    <div class="wysiwyg">
      <h3>Undergraduate Programs</h3>
      <p>Rerum similique totam illo temporibus ullam quod soluta consectetur qui. Molestiae labore placeat in vitae laborum accusantium nemo non ut autem ipsum commodi dignissimos error. Est ratione temporibus debitis voluptatem eos dolorum iste eius id quas tenetur aspernatur quo nisi</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Datepicker

1
2
3
<div class="datepicker">
    <input type="text" name="search" placeholder="Search by date" class="form__control js-datepicker" autocomplete="off">
</div>

Chatbox

Toggle Chatbox

Close

Need to talk to someone?

David from Georgia is one of our admissions hosts and is a third year student. He'd be happy to answer any questions.

Request a callback or email:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- Library only -->
<h4><a href="#" class="library-chatbox-toggle">Toggle Chatbox</a></h4>
<!-- end library only -->

<div class="chatbox">
  <a href="#" class="chatbox__close-icon js-chatbox-close">Close</a>
  <h3>Need to talk to someone?</h3>
  <div class="chatbox__profile">
    <img src="http://jam.domain7.net/redlands/94/94/people" class="chatbox__profile-image">
    <div class="chatbox__profile-biography">
      <p>David from Georgia is one of our admissions hosts and is a third year student. He'd be happy to answer any questions.</p>
    </div>
  </div>
  <h4>Request a callback or email:</h4>
  <div class="chatbox__form form">
    <form>
      <div class="form__group">
        <label for="name">Your name</label>
        <input type="text" class="form__control" id="name">
      </div>
      <div class="form__group form__group--split">
        <div class="chatbox__form-email form__split-item">
          <label for="email">Your email</label>
          <input type="email" class="form__control" id="email">
        </div>
        <div class="chatbox__form-phone form__split-item">
          <label for="phone">Your phone</label>
          <input type="tel" class="form__control" id="phone">
        </div>
      </div>
      <div class="form__group form__group--footer chatbox__form--footer">
        <button type="submit" class="button">Submit</button>
      </div>
    </form>
  </div>
  <div class="chatbox__footer js-chatbox-close">
    <a href="#" class="chatbox__close">Dismiss</a>
  </div>
</div>

Wysiwyg

H3 Sed nec diam eu diam mattis viverra

Primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.

H4 Nulla facilis Duis aliquet

Bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quisat nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque.

  • 1. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.

    Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    Toggle Content

  • 2. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.

    Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    Toggle Content

First accordion collapsed on load

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.
H5 Nulla facilisi. Duis aliquet egestas purus in blandit.

Tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum.

H6 Vestibulum mollis mauris enim
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue.

In libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue.

  • Suspendisse dictum feugiat nisl ut dapibus.
  • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    1. Suspendisse dictum feugiat nisl ut dapibus.
    2. Suspendisse dictum feugiat nisl ut dapibus.
    3. Suspendisse dictum feugiat nisl ut dapibus.
  • Suspendisse dictum feugiat nisl ut dapibus.
  • Suspendisse dictum feugiat nisl ut dapibus.
  • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
      1. Suspendisse dictum feugiat nisl ut dapibus.
      2. Suspendisse dictum feugiat nisl ut dapibus.
      3. Suspendisse dictum feugiat nisl ut dapibus.
  1. Suspendisse dictum feugiat nisl ut dapibus.
  2. Suspendisse dictum feugiat nisl ut dapibus.
    1. Suspendisse dictum feugiat nisl ut dapibus.
    2. Suspendisse dictum feugiat nisl ut dapibus.
    3. Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
    • Suspendisse dictum feugiat nisl ut dapibus.
  3. Suspendisse dictum feugiat nisl ut dapibus.
  4. Suspendisse dictum feugiat nisl ut dapibus.
  5. Suspendisse dictum feugiat nisl ut dapibus.
    1. Suspendisse dictum feugiat nisl ut dapibus.
    2. Suspendisse dictum feugiat nisl ut dapibus.
    3. Suspendisse dictum feugiat nisl ut dapibus.
      • Suspendisse dictum feugiat nisl ut dapibus.
      • Suspendisse dictum feugiat nisl ut dapibus.
      • Suspendisse dictum feugiat nisl ut dapibus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<div class="wysiwyg">

  <h3>H3 Sed nec diam eu diam mattis viverra</h3>

  <img src="http://jam.domain7.net/redlands/800/600" width="400" height="300" class="align-right" />

  <p>Primis in faucibus orci luctus et <a href="#">ultrices posuere cubilia</a> Curae; Proin vel <em>ante a orci tempus eleifend ut</em> et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. <strong>In condimentum facilisis porta.</strong> Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</p>

  <h4>H4 Nulla facilis Duis aliquet</h4>
  <p>Bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quisat nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque.</p>

  <img src="http://jam.domain7.net/redlands/800/600" class="full-width" />

  <ul class="content-accordion" data-group-type="accordion">
  <li>
    <p> 1. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
  <li>
    <p> 2. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
</ul><!-- .panel-group -->

<h3> First accordion collapsed on load</h3>

<ul class="content-accordion is-collapsed" data-group-type="accordion">
  <li>
    <p> 1. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
  <li>
    <p> 2. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="content-accordion__item">
      <div class="content-accordion__content">
        <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </div>
      <h4 class="content-accordion__header"><span>Toggle Content</span></h4>
    </div>
  </li>
</ul><!-- .panel-group -->


  <blockquote>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.
  </blockquote>

  <div class="video-embed">
    <iframe src="https://player.vimeo.com/video/107457314" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

  <h5>H5 Nulla facilisi. Duis aliquet egestas purus in blandit.</h5>
  <img src="http://jam.domain7.net/redlands/800/600" width="200" height="100" class="align-left" />
  <p>Tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum.</p>

  <div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>


  <h6>H6 Vestibulum mollis mauris enim</h6>
  <figure class="image-caption align-right">
    <img src="http://jam.domain7.net/redlands/300/350" width="300" height="350" />
    <figcaption class="caption">Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue.</figcaption>
  </figure>
  <p>In libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue.</p>

  <ul>
    <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.
      <ul>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
      </ul>
      <ol>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
      </ol>
    </li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.
      <ul>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.
          <ol>
            <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
            <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
            <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>

  <ol>
    <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.
      <ol>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
      </ol>
      <ul>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
      </ul>
    </li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
    <li>Suspendisse dictum feugiat nisl ut dapibus.
      <ol>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
        <li>Suspendisse dictum feugiat nisl ut dapibus.
          <ul>
            <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
            <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
            <li>Suspendisse dictum feugiat nisl ut dapibus.</li>
          </ul>
        </li>
      </ol>
    </li>
  </ol>

</div>

Page-title

Default

NOTE! Don't add this `parent_class` container element. The `parent_class` class should be on the `` element. This is here for demonstration purposes in the UI library only.

The Page Title

Part of the Section of the Site
1
2
3
4
5
6
7
<div class="page-title">
  <h1 class="page-title__name">The Page Title</h1>
  <div class="page-title__trail">
    Part of the <a href="">Section of the Site</a>
  </div>
</div>

Landing page

The Page Title

Part of the Section of the Site
1
2
3
4
5
6
7
<div class="page-title">
  <h1 class="page-title__name">The Page Title</h1>
  <div class="page-title__trail">
    Part of the <a href="">Section of the Site</a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="l-container">
  <div class="columns columns--2 content-feature content-feature--landing">
    <div class="columns__item">
      <div class="content-feature__item">
        <a href="#">
          <img src="http://jam.domain7.net/redlands/800/600" class="content-feature__item-image">
          <span class="content-feature__item-tag tag">Feature News</span>
          <div class="content-feature__item-content">
            <h3 class="content-feature__item-headline">This is an item, This is some additional text to make the headline a bit longer!</h3>
            <p class="content-feature__item-date">
              March 9, 2015
            </p>
          </div>
        </a>
      </div>
    </div>
    <div class="columns__item">
      <div class="content-feature__item content-feature__item--events">
        <a href="#">
          <img src="http://jam.domain7.net/redlands/800/600" class="content-feature__item-image">
          <span class="content-feature__item-tag tag">Feature Event</span>
          <div class="content-feature__item-content">
            <h3 class="content-feature__item-headline">This is an item</h3>
            <p class="content-feature__item-description">Friday, 7PM at Orton Center</p>
            <p class="content-feature__item-date">
              <span class="month">Mar</span> <span class="date">9</span>
            </p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<div class="proof-points">
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
  <div class="proof-points__item">
    <a href="#" class="proof-points__inner">
      
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">

      <h3 class="media__title">Lorem ipsum dolor</h3>

      <div class="media__body wysiwyg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>

      <span  class="more-link">Learn more</span>

  </div> <!-- .media__content -->

 </div>

    </a>
  </div>
</div>

Testimonials-alt-deep-blue

After Redlands I was able to ...

"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
Person Name
Person title or class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- testimonials module without a slider -->

<div class="testimonials testimonials-alt--deep-blue testimonials left testimonials-alt ">
	<div class="testimonials__container l-container">
    <div class="l-inner">
        <div class="testimonials__slider">
          <img src="http://jam.domain7.net/redlands/820/524" alt="">
        </div>
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>
  			<div class="testimonials__items">
  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</div>

Colors

Note: this isn't a module per say. It's just for demonstrating the color variables. A .t-color-x class can be added to select modules for specific color theming.

Theme colors

All colors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div class="colors">
  <p class="colors__note">
    <strong>Note:</strong> this isn't a module per say. It's just for demonstrating the color variables. A <code>.t-color-x</code> class can be added to select modules for specific color theming.
  </p>
  <h3>Theme colors</h3>
  <ul class="colors__list">
    <li class="colors__item t-color-1"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-2"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-3"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-4"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-5"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-6"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-7"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-8"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-9"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-10"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-11"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-12"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-13"><div class="colors__inner"></div></li>
    <li class="colors__item t-color-14"><div class="colors__inner"></div></li>
  </ul>
  <h3>All colors</h3>
  <ul class="colors__list">
    <li class="colors__item colors__item--color-base"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-base-light"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-brand"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-brand-accent"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-canvas"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-canvas-alt"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-keyline"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-keyline-alt"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-1"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-2"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-3"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-4"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-5"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-6"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-7"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-8"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-9"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-10"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-11"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-12"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-13"><div class="colors__inner"></div></li>
    <li class="colors__item colors__item--color-accent-14"><div class="colors__inner"></div></li>
  </ul>
</div>

Item-list

This is a list of documents that can be downloaded...

  • Lorem ipsum dolor sit.
  • Quaerat dolorem error, dolore. Download
  • Minus ad porro dolores. Download
  • Numquam voluptatibus explicabo, cumque.
  • Voluptatem neque cum suscipit.
1
2
3
4
5
6
7
8
9
10
<div class="item-list">
  <h4 class="item-list__title">This is a list of documents that can be downloaded...</h4>
  <ul class="item-list__items">
    <li class="item-list__item">Lorem ipsum dolor sit.</li>
    <li class="item-list__item">Quaerat dolorem error, dolore. <a href="#" class="button button--slim">Download <i class="fa fa-download"></i></a></li>
    <li class="item-list__item">Minus ad porro dolores. <a href="#" class="button button--slim">Download <i class="fa fa-download"></i></a></li>
    <li class="item-list__item">Numquam voluptatibus explicabo, cumque.</li>
    <li class="item-list__item">Voluptatem neque cum suscipit.</li>
  </ul>
</div>

Intro

Default .

Used for section intros. Can use a title, or be split and contain the intro and a body section side by side. If body text is used, the .intro--details variation is also required.

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro ">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

With line .intro--line

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--line">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Deep Blue .intro--deep-blue

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--deep-blue">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Deep Blue with Line .intro--line.intro--deep-blue

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--line intro--deep-blue">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Rich Blue .intro--rich-blue

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--rich-blue">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Rich Blue with Line .intro--line.intro--rich-blue

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--line intro--rich-blue">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Sylvan .intro--sylvan

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--sylvan">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Sylvan with Line .intro--line.intro--sylvan

A lorem ipsum dolor sit amet elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

1
2
3
4
5
6
7
8
9
10
<div class="intro intro--line intro--sylvan">
  <h2 class="intro__title">A lorem ipsum dolor sit amet elit.</h2>
  
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  
</div>

Details .intro--with-details

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="intro intro--with-details">
  
  <div class="intro__details">
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  <div class="intro__body">
  <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p><p>Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  
  </div>
</div>

Details and line .intro--line.intro--with-details

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="intro intro--line intro--with-details">
  
  <div class="intro__details">
  
  <div class="intro__description">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet, dapibus quis, tincidunt nec, risus. Class patent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>
  
  <div class="intro__body">
  <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p><p>Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  
  </div>
</div>

Checkout-cart-summary

Courses
  • ACCTS 210
    Principles of Financial Accounting and Reporting
    Date and Time: Jan 10–Mar 6 2022 | Mon, 6–9
    Location: Online
    Cost: $300
Subtotal: $300
Events
Products
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="checkout-section checkout-section--open">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-down"></i>
    Courses
  </div>
  <div class="checkout-section__content">
    <ul>
      <li class="checkout-section__cart-item">
        <div class="checkout-section__product-id">
          ACCTS 210 <br />
          Principles of Financial Accounting and Reporting
        </div>
        <div>
          Date and Time: Jan 10–Mar 6 2022 | Mon, 6–9 <br/>
          Location: Online <br />
          Cost: $300
        </div>
        <button class="js-remove-item order-summary__remove" title="Remove Item">
          <span class="u-screen-reader">Remove Item</span>
          <i class="fas fa-trash-alt" aria-hidden="true"></i>
        </button>
      </li>
    </ul>
    <div class="checkout-section__cart-subtotal">
       Subtotal: <span>$300</span>
    </div>
  </div>
</div>

<div class="checkout-section checkout-section--closed">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-down"></i>
    Events
  </div>
  <div class="checkout-section__content">
  </div>
</div>

<div class="checkout-section checkout-section--closed">
  <div class="checkout-section__heading js-checkout-section">
    <i class="fas fa-caret-down"></i>
    Products
  </div>
  <div class="checkout-section__content">
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="columns columns--3 ">

  <div class="columns__item content-tile">
    <a href="" class="content-tile__wrapper">
      <div class="content-tile__body">
        <h3 class="content-tile__body-headline">This is a text content-tile title, its a little long</h3>
        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>
        <span class="button button--ghost">This is a button</span>
      </div>
    </a>
  </div>

  <div class="columns__item content-tile">
    <a href="" class="content-tile__wrapper">
      <div class="content-tile__body">
        <h3 class="content-tile__body-headline">This is a text content-tile title, its a little long</h3>
        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>
        <span class="button button--ghost">This is a button</span>
      </div>
    </a>
  </div>

  <div class="columns__item content-tile">
    <a href="" class="content-tile__wrapper">
      <div class="content-tile__body">
        <h3 class="content-tile__body-headline">This is a text content-tile title, its a little long</h3>
        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis ac tempor dui sagittis ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>
        <span class="button button--ghost">This is a button</span>
      </div>
    </a>
  </div>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="image-tile image-tile--sylvan" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/524">
  <a href="#" class="image-tile__wrapper">

      <span class="tag">TagName</span>

    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle">Short Descriptor</p>

      </div>

  </a>
</div>

Panel-group

Core content

Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

This is some career advice

Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Graduate story

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Core content

Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

This is some career advice

Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Graduate story

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="panel-group js-panel-group" data-group-type="tabs">
  <div class="panel-group__item">
    <h4 class="panel-group__header">Core content</h4>
    <div class="panel-group__content">
      <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
  </div>
  <div class="panel-group__item">
    <h4 class="panel-group__header">This is some career advice</h4>
    <div class="panel-group__content">
      <p>Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
  <div class="panel-group__item">
    <h4 class="panel-group__header">Graduate story</h4>
    <div class="panel-group__content">
      <p>Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
  </div>
</div><!-- .panel-group -->

<div class="panel-group js-panel-group" data-group-type="accordion">
  <div class="panel-group__item">
    <h4 class="panel-group__header">Core content</h4>
    <div class="panel-group__content">
      <p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
  </div>
  <div class="panel-group__item">
    <h4 class="panel-group__header">This is some career advice</h4>
    <div class="panel-group__content">
      <p>Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
  <div class="panel-group__item">
    <h4 class="panel-group__header">Graduate story</h4>
    <div class="panel-group__content">
      <p>Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
  </div>
</div><!-- .panel-group -->

A2z-directory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="l-padding-bottom">
<form action="/a-z-directory/" method="post" class="a2z">

    <div>

        <input data-val="true" data-val-required="The AcademicDepartments field is required." id="Form_AcademicDepartments" name="Form.AcademicDepartments" onclick="this.form.submit()" type="checkbox" value="true"><input name="Form.AcademicDepartments" type="hidden" value="false">
        <label for="Form_AcademicDepartments">Academic Departments</label>

        <input checked="checked" data-val="true" data-val-required="The OfficeAndServices field is required." id="Form_OfficeAndServices" name="Form.OfficeAndServices" onclick="this.form.submit()" type="checkbox" value="true"><input name="Form.OfficeAndServices" type="hidden" value="false">
        <label for="Form_OfficeAndServices">Office and Services</label>

        <input checked="checked" data-val="true" data-val-required="The SchoolsAndCenters field is required." id="Form_SchoolsAndCenters" name="Form.SchoolsAndCenters" onclick="this.form.submit()" type="checkbox" value="true"><input name="Form.SchoolsAndCenters" type="hidden" value="false">
        <label for="Form_SchoolsAndCenters">Schools and Centers</label>

        <input checked="checked" data-val="true" data-val-required="The FacultyAndStaff field is required." id="Form_FacultyAndStaff" name="Form.FacultyAndStaff" onclick="this.form.submit()" type="checkbox" value="true"><input name="Form.FacultyAndStaff" type="hidden" value="false">
        <label for="Form_FacultyAndStaff">Faculty and Staff</label>

    </div>

        <button name="Form.CurrentIndex" type="submit" value="A">A</button>
        <button name="Form.CurrentIndex" type="submit" value="B" class="active">B</button>
        <button name="Form.CurrentIndex" type="submit" value="C">C</button>
        <button name="Form.CurrentIndex" type="submit" value="D">D</button>
        <button name="Form.CurrentIndex" type="submit" value="E">E</button>
        <button name="Form.CurrentIndex" type="submit" value="F">F</button>
        <button name="Form.CurrentIndex" type="submit" value="G">G</button>
        <button name="Form.CurrentIndex" type="submit" value="H">H</button>
        <button name="Form.CurrentIndex" type="submit" value="I">I</button>
        <button name="Form.CurrentIndex" type="submit" value="J">J</button>
        <button name="Form.CurrentIndex" type="submit" value="K">K</button>
        <button name="Form.CurrentIndex" type="submit" value="L">L</button>
        <button name="Form.CurrentIndex" type="submit" value="M">M</button>
        <button name="Form.CurrentIndex" type="submit" value="N">N</button>
        <button name="Form.CurrentIndex" type="submit" value="O">O</button>
        <button name="Form.CurrentIndex" type="submit" value="P">P</button>
        <button name="Form.CurrentIndex" type="submit" value="Q">Q</button>
        <button name="Form.CurrentIndex" type="submit" value="R">R</button>
        <button name="Form.CurrentIndex" type="submit" value="S">S</button>
        <button name="Form.CurrentIndex" type="submit" value="T">T</button>
        <button name="Form.CurrentIndex" type="submit" value="U">U</button>
        <button name="Form.CurrentIndex" type="submit" value="V">V</button>
        <button name="Form.CurrentIndex" type="submit" value="W">W</button>
        <button name="Form.CurrentIndex" type="submit" value="X">X</button>
        <button name="Form.CurrentIndex" type="submit" value="Y">Y</button>
        <button name="Form.CurrentIndex" type="submit" value="Z">Z</button>

    <input id="Form_CurrentIndex" name="Form.CurrentIndex" type="hidden" value="A">
</form>
</div>

Testimonials-alder

After Redlands I was able to ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="testimonials testimonials--alder">
	<div class="testimonials__container l-container">
    <div class="l-inner">
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>

  			<div class="testimonials__items owl-carousel">

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider1" alt="" class="testimonials__item-image">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 1</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider2" alt="" class="testimonials__item-image">
  						"Testimonial #2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 2</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider3" alt="" class="testimonials__item-image">
  						"Testimonial #3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 3</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider4" alt="" class="testimonials__item-image">
  						"Testimonial #4. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 4</a></div>
  				</div>

  			</div>
  		</div>

  		<div class="testimonials__slider">
  			<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

  		</div>
  	</div>
  </div>
</div>

Progress-indicator

1
<progress class="progress-indicator" value="0"></progress>

Testimonials-deep-blue

After Redlands I was able to ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="testimonials testimonials--deep-blue">
	<div class="testimonials__container l-container">
    <div class="l-inner">
  		<div class="testimonials__text">
  			<h2 class="testimonials__heading">After Redlands I was able to ...</h2>

  			<div class="testimonials__items owl-carousel">

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider1" alt="" class="testimonials__item-image">
  						"Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 1</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider2" alt="" class="testimonials__item-image">
  						"Testimonial #2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 2</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider3" alt="" class="testimonials__item-image">
  						"Testimonial #3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 3</a></div>
  				</div>

  				<div class="testimonials__item">
  					<div class="testimonials__item-body">
  						<img src="http://jam.domain7.net/redlands/820/524/slider4" alt="" class="testimonials__item-image">
  						"Testimonial #4. Lorem ipsum dolor sit amet, consectetur adipisicing 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. "
  					</div>
  					<div class="testimonials__item-name">Person Name</div>
  					<div class="testimonials__item-title">Person title or class</div>
            <div class="testimonials__item-link"><a href="#">Go Here 4</a></div>
  				</div>

  			</div>
  		</div>

  		<div class="testimonials__slider">
  			<div class="slider ">
	<div class="owl-carousel slider__images">
		<img src="http://jam.domain7.net/redlands/820/420/slider1"   alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider2"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3"  alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4"  alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

	</div>
</div>

  		</div>
  	</div>
  </div>
</div>

Columns

A class of columns__item--flush can be added to a .columns__item to remove that item's padding. Works best inside a .columns--wide or .columns--bordered block.

2 Columns .columns--2

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="columns columns--2">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>



</div>

3 Columns .columns--3

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a long title that might wrap onto two lines

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

  • Spring Break Plunge
  • Community Service Organizations
  • Diversity Organizations
  • Political & Social Justice Organizations
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="columns columns--3">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

  <div class="columns__item">
    
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a long title that might wrap onto two lines</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p> <ul> <li>Spring Break Plunge</li> <li>Community Service Organizations</li> <li>Diversity Organizations</li> <li>Political & Social Justice Organizations</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

  </div>


</div>

4 Columns .columns--4

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a long title that might wrap onto two lines

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

  • Spring Break Plunge
  • Community Service Organizations
  • Diversity Organizations
  • Political & Social Justice Organizations

More stuff here

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="columns columns--4">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

  <div class="columns__item">
    
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a long title that might wrap onto two lines</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p> <ul> <li>Spring Break Plunge</li> <li>Community Service Organizations</li> <li>Diversity Organizations</li> <li>Political & Social Justice Organizations</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

  </div>

	<div class="columns__item">
		
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>More stuff here</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

</div>

Equal heights .columns--equal-height.columns--2

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a long title that might wrap onto two lines

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

  • Spring Break Plunge
  • Community Service Organizations
  • Diversity Organizations
  • Political & Social Justice Organizations

More stuff here

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="columns columns--equal-height columns--2">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

  <div class="columns__item">
    
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a long title that might wrap onto two lines</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p> <ul> <li>Spring Break Plunge</li> <li>Community Service Organizations</li> <li>Diversity Organizations</li> <li>Political & Social Justice Organizations</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

  </div>

	<div class="columns__item">
		
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>More stuff here</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

</div>

Wide .columns--wide.columns--3

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a long title that might wrap onto two lines

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

  • Spring Break Plunge
  • Community Service Organizations
  • Diversity Organizations
  • Political & Social Justice Organizations
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="columns columns--wide columns--3">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

  <div class="columns__item">
    
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a long title that might wrap onto two lines</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p> <ul> <li>Spring Break Plunge</li> <li>Community Service Organizations</li> <li>Diversity Organizations</li> <li>Political & Social Justice Organizations</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

  </div>


</div>

Bordered .columns--bordered.columns--3

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a long title that might wrap onto two lines

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

  • Spring Break Plunge
  • Community Service Organizations
  • Diversity Organizations
  • Political & Social Justice Organizations
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="columns columns--bordered columns--3">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

  <div class="columns__item">
    
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a long title that might wrap onto two lines</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p> <ul> <li>Spring Break Plunge</li> <li>Community Service Organizations</li> <li>Diversity Organizations</li> <li>Political & Social Justice Organizations</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

  </div>


</div>

Bordered .columns--bordered.columns--4

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a title

1200 East Colton Ave
Redlands, CA, 92373 United States
Tel: (909) 793-2121
Fax: (909) 793-2029

Learn More

This is a long title that might wrap onto two lines

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

  • Spring Break Plunge
  • Community Service Organizations
  • Diversity Organizations
  • Political & Social Justice Organizations

More stuff here

Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="columns columns--bordered columns--4">

	<div class="columns__item">
		
 <div class="media ">

    <figure class="media__figure">
      <img src="http://jam.domain7.net/redlands/800/524" alt="">
    </figure>


  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>
	<div class="columns__item">
		
 <div class="media ">


    <figure class="media__figure">
      <a href="https://www.youtube.com/watch?v=oox1Ukb666A" class="video-link fresco">
	<img src="http://jam.domain7.net/redlands/800/524" alt="">
</a>

    </figure>

  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a title</h3><p>1200 East Colton Ave<br>Redlands, CA, 92373 United States<br>Tel: (909) 793-2121<br>Fax: (909) 793-2029</p><p><a href="#" class="button ">Learn More</a></p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

  <div class="columns__item">
    
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>This is a long title that might wrap onto two lines</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p> <ul> <li>Spring Break Plunge</li> <li>Community Service Organizations</li> <li>Diversity Organizations</li> <li>Political & Social Justice Organizations</li> </ul>
      </div>


  </div> <!-- .media__content -->

 </div>

  </div>

	<div class="columns__item">
		
 <div class="media ">



  <div class="media__content">


      <div class="media__body wysiwyg">
        <h3>More stuff here</h3> <p>Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in. Lorem ipsum dolor sit amet consecteteur adipscing cras justo odio, dapibus ac afacilisis in.</p>
      </div>


  </div> <!-- .media__content -->

 </div>

	</div>

</div>

Contact-list

  • Administration

    Samplename Lastname

    This is the title

    Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.

    Contact
  • Administration

    Samplename Lastname

    This is the title

    Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.

    Contact
  • Administration

    Samplename Lastname

    This is the title

    Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.

    Contact
  • Administration

    Samplename Lastname

    This is the title

    Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.

    Contact
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<ul class="contact-list">
  <li class="contact-list__item">
    <div class="contact-list__item-body contact-list__item-body--no-thumb">
      <div class="contact-list__item-bio">
        <h5 class="contact-list__item-label">Administration</h5>
        <h3 class="contact-list__item-name">Samplename Lastname</h3>
        <h4 class="contact-list__item-title">This is the title</h4>
        <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.</p>
      </div>
      <div class="contact-list__item-contact">
        <h5 class="contact-list__item-label">Contact</h5>
        <ul class="contact-list__item-contact-list">
          <li>P: 123-123-1234</li>
          <li>F: 123-123-1234</li>
          <li><a href="#">samplenamelastname@redlands.edu</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="contact-list__item">
    <img class="contact-list__item-thumbnail" src="http://jam.domain7.net/redlands/180/180">
    <div class="contact-list__item-body">
      <div class="contact-list__item-bio">
        <h5 class="contact-list__item-label">Administration</h5>
        <h3 class="contact-list__item-name">Samplename Lastname</h3>
        <h4 class="contact-list__item-title">This is the title</h4>
        <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.</p>
      </div>
      <div class="contact-list__item-contact">
        <h5 class="contact-list__item-label">Contact</h5>
        <ul class="contact-list__item-contact-list">
          <li>P: 123-123-1234</li>
          <li>F: 123-123-1234</li>
          <li><a href="#">samplenamelastname@redlands.edu</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="contact-list__item">
    <img class="contact-list__item-thumbnail" src="http://jam.domain7.net/redlands/180/180">
    <div class="contact-list__item-body">
      <div class="contact-list__item-bio">
        <h5 class="contact-list__item-label">Administration</h5>
        <h3 class="contact-list__item-name">Samplename Lastname</h3>
        <h4 class="contact-list__item-title">This is the title</h4>
        <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.</p>
      </div>
      <div class="contact-list__item-contact">
        <h5 class="contact-list__item-label">Contact</h5>
        <ul class="contact-list__item-contact-list">
          <li>P: 123-123-1234</li>
          <li>F: 123-123-1234</li>
          <li><a href="#">samplenamelastname@redlands.edu</a></li>
        </ul>
      </div>
    </div>
  </li>
    <li class="contact-list__item">
    <img class="contact-list__item-thumbnail" src="http://jam.domain7.net/redlands/180/180">
    <div class="contact-list__item-body">
      <div class="contact-list__item-bio">
        <h5 class="contact-list__item-label">Administration</h5>
        <h3 class="contact-list__item-name">Samplename Lastname</h3>
        <h4 class="contact-list__item-title">This is the title</h4>
        <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.</p>
      </div>
      <div class="contact-list__item-contact">
        <h5 class="contact-list__item-label">Contact</h5>
        <ul class="contact-list__item-contact-list">
          <li>P: 123-123-1234</li>
          <li>F: 123-123-1234</li>
          <li><a href="#">samplenamelastname@redlands.edu</a></li>
        </ul>
      </div>
    </div>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a href="#" class="proof-point-feature__outer-link">

  <div class="proof-point-feature">

      <div class="proof-point-feature__content">
        <h3 class="proof-point-feature__title">Gorgeous campus</h3>
        <div class="proof-point-feature__body">
          <p>Orange groves, architectural landmarks, and 160 acres of open beauty in Southern California.</p>
        </div>
        <span class="more-link">Learn more</span>
      </div>

    <div class="proof-point-feature__media">
      <img src="http://jam.domain7.net/redlands/1245/556/proofpoint1" width="1245" height="556" />
    </div>


  </div>

</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="image-tile image-tile--rich-blue" data-rl-image-tile-photo="http://jam.domain7.net/redlands/800/524">
  <a href="#" class="image-tile__wrapper">

      <span class="tag">TagName</span>

    <div class="image-tile__body">

        <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

        <span class="button button--ghost button--reverse">This is a button</span>

    </div>

      <div class="image-tile__titles">

          <h3 class="image-tile__title">Quick Short Headline</h3>

          <p class="image-tile__subtitle">Short Descriptor</p>

      </div>

  </a>
</div>

Locations

For each .locations__item, add a data-rl-map-lat and data-rl-map-long data attribute to create another item on the map. A location can be open by default by adding a data-rl-map-default="true" to one item.

Directions link

The .js-locations-directions class replaces the href value with a link to Google Maps using the suppled lat/long in data-rl-map-lat and data-rl-map-long.

Burbank

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

Pasadena

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

Rancho Cucamonga

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

Redlands (main campus)

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

Riverside

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

San Diego

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

South Coast Metro

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

Temecula

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212

Los Angeles

  • 1200 E. Colton Ave
  • Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.
  • Phone: (909) 793-212
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div class="locations js-locations">
  <div class="panel-group locations__menu" data-group-type="accordion">
    <div class="panel-group__item locations__item" data-rl-map-lat="34.1851701" data-rl-map-long="-118.3089652">
      <h4 class="panel-group__header">Burbank</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="34.1390112" data-rl-map-long="-118.1245135">
      <h4 class="panel-group__header">Pasadena</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="34.0783629" data-rl-map-long="-117.5764122">
      <h4 class="panel-group__header">Rancho Cucamonga</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="34.062309" data-rl-map-long="-117.1642625" data-rl-map-default="true">
      <h4 class="panel-group__header">Redlands (main campus)</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="33.9529912" data-rl-map-long="-117.3916351">
      <h4 class="panel-group__header">Riverside</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="32.7794596" data-rl-map-long="-117.1353621">
      <h4 class="panel-group__header">San Diego</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="33.6972588" data-rl-map-long="-117.8665546">
      <h4 class="panel-group__header">South Coast Metro</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="33.512314" data-rl-map-long="-117.157948">
      <h4 class="panel-group__header">Temecula</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
    <div class="panel-group__item locations__item" data-rl-map-lat="33.8569685" data-rl-map-long="-118.2905735">
      <h4 class="panel-group__header">Los Angeles</h4>
      <div class="panel-group__content">
        <ul class="locations__details">
          <li class="locations__detail locations__detail--address">1200 E. Colton Ave</li>
          <li class="locations__detail locations__detail--directions">Located just off the 1-10 freeway. We are aproximately 60 minutes east of Los Angeles and 40 minutes west of Palm Springs.</li>
          <li class="locations__detail locations__detail--phone">Phone: (909) 793-212</li>
        </ul>
        <ul class="locations__actions">
          <li class="locations__action"><a href="#">Visit this campus page</a></li>
          <li class="locations__action"><a href="#" class="js-locations-directions">Get directions (Google maps)</a></li>
        </ul>
      </div>
    </div>
  </div><!-- .panel-group -->
  <div class="locations__map"></div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="feature-tabs feature-tabs--rich-blue  is-scrollable">
  <div class="feature-tabs__inner">
    <h2 class="feature-tabs__header"></h2>
    <nav class="feature-tabs__items">
      <a rl-program-tab="default" rl-degree-id="search.test" rl-on-activate="search.onActivate()" href="#" class="feature-tabs__item is-active" search="search">Undergraduate</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Bachelor's Degree for Professionals</a>
      <a rl-program-tab href="#" class="feature-tabs__item">Graduate & Continuing Education</a>
    </nav>
  </div>
</div>