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

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>

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>

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>

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>

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>

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
<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>
  </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>
  </ul>
</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-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>

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>

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

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>

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>

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>

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-1">
  <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-4">
  <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-5">
  <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-6">
  <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-7">
  <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-9">
  <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-10">
  <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>

Cta

Default

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--facebook">
  <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-1">
  <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
<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>
</a>
1
2
3
4
<a href="#" class="cta t-color-3">
  <h4 class="cta__title">Sit amet consectetur</h4>
    <span class="button">Sign up now</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-4">
  <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
<a href="#" class="cta t-color-5">
  <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 t-color-6">
  <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-7">
  <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>

t-color-8 .t-color-8

This variation is actually the default state, but if you want to explicitly declare it you can

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.

Contact us
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">Contact us</span>
</a>
1
2
3
4
5
6
7
<a href="#" class="cta t-color-9">
  <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</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>

Datepicker

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

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>

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

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>

Light .feature-tabs--light

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

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

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>

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="Nisi optio sint ut eum sit et animi dolores quod autem odio et" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3" data-caption="Voluptates at soluta quisquam sunt repellat provident et qui minima rerum ipsum" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4" data-caption="Nihil soluta voluptas earum nostrum sunt" 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>

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>

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>

Grid-list

Find your program

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

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

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


  </div>
</div>

Grid-list static

Find your program

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
<div class="grid-list row row--everything">
  <div class="l-container">

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

      <div class="form list-form">
  <form action="#">
    <div class="form__group list-form__search">
      <div class="search search--dark">
        <div class="search__field-group">
          <input type="text" name="search" placeholder="Search for a program" class="form__control search__field">
          <button type="submit" class="search__button form__control">Search</button>
        </div>
      </div>
    </div>
    <div class="form__group list-form__filter">
      <select name="program-search-type" id="program-search" class="form__control form-select">
        <option value="majors">Majors</option>
        <option value="other1">Other option</option>
        <option value="other2">Something else</option>
      </select>
    </div>
  </form>
</div>


    <ul class="grid-list__items columns columns--3 columns--equal-height">
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
        <li class="columns__item">
          <a href="#" class="grid-list__item grid-list__link">
            <ul class="grid-list__content">
              <li class="grid-list__image"><img src='http://jam.domain7.net/redlands/800/524' /></li>
              <li class="grid-list__title">Major in Creative Writing — BA</li>
              <li class="grid-list__subtitle">College of Arts & Sciences</li>
              <li class="grid-list__body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at lectus quis magna elementum rutrum. Duis ligula lacus, sodales sit amet.</p>
              </li>
            </ul>
          </a>
        </li>
      <li class="columns__item">
        <a href="#" class="button button--block">All undergraduate programs</a>
      </li>
    </ul>

      <div class="button__wrapper">
        <a href="#" class="button">Load more</a>
      </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
33
34
<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>
            </div><!--page-title-->
						<div class="more-cta-cue">
							Explore programs
						</div>
					</div><!--hero__item-content-container-->
        </div> <!--hero__item-->
      </div> <!--hero__items-->


	</div>

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

Video Hero .hero--video

A hero with a single video and an image fallback

This is some title text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis laudantium dolorum consequuntur quod numquam maiores. Facilis maiores repudiandae, recusandae tempora, ipsam illum nulla quaerat distinctio cumque quasi est deleniti animi?

This is a button
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>This is some title text</h1>
					</div>
					<div class="hero__item-body">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis laudantium dolorum consequuntur quod numquam maiores. Facilis maiores repudiandae, recusandae tempora, ipsam illum nulla quaerat distinctio cumque quasi est deleniti animi?</p>
						<a href="#" class="button">This is a button</a>
					</div>
				</div>
				<div class="more-cta-cue">
					Explore programs
				</div>
			</div>
		</div>



	</div>

	<div class="hero__decoration"></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>

Image-cta

Default .

Black text on grey background

Applying as an Undergraduate?

Nesciunt omnis corporis quo molestiae temporibus aliquam dolorem eum assumenda laboriosam quisquam qui. At officia numquam sed eum consequatur ut porro ea corporis iusto dolore sint debitis provident. Tempora quo dolores necessitatibus enim sed voluptatem et odit porro consequatur saepe beatae. Et natus alias unde aut nostrum quod ipsa perferendis deserunt

How to apply

Undergraduate Programs

Velit delectus recusandae commodi sint. Est praesentium possimus magnam placeat illum ipsum delectus. Maiores quos et voluptatibus nemo autem temporibus veniam aperiam a

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>Cupiditate corrupti ut ratione qui nam vel earum blanditiis exercitationem explicabo eos fugiat. Aliquid et eligendi ipsam assumenda architecto repellendus. Hic pariatur harum reiciendis eveniet ex. Reiciendis consequatur rerum esse quos facilis</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 enim sit magnam explicabo. Facilis laboriosam ex qui velit iusto doloremque blanditiis et exercitationem voluptas modi eius. Praesentium ab corrupti maiores explicabo minima iure et est ad dolorem et placeat ipsum maxime</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 1 .t-color-1

Applying as an Undergraduate?

Optio voluptas fugit beatae quod et eos id quod alias adipisci magni iure quidem laboriosam. Blanditiis fugit odit magnam tempore quas laborum dolores voluptatem autem labore. Error nobis laboriosam deleniti. Perspiciatis soluta natus vero est nihil sit vel exercitationem

How to apply

Undergraduate Programs

Itaque est vitae deserunt consectetur. Maiores nisi libero maiores provident illo asperiores eligendi similique reprehenderit. Quidem sit dolor molestiae

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-1">
  <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>Commodi cupiditate sed et cum. Ut natus qui vitae id rerum dolorem repellendus corporis consectetur error non officiis qui reprehenderit. Quae a sunt tenetur et et voluptatem praesentium et vel eveniet. Beatae labore non quis molestiae ea quisquam qui quos atque voluptatem sint animi aliquid</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>Quisquam rerum excepturi laborum dolores accusamus sapiente voluptate quasi harum at repellendus atque repudiandae quisquam. Id ut debitis enim excepturi voluptas. Ratione nam ab amet doloribus molestias nostrum ut tenetur soluta aliquam asperiores aspernatur qui inventore</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 2 .t-color-2

Applying as an Undergraduate?

Quo perferendis soluta magnam voluptas amet ut est enim facere. Non voluptatibus occaecati asperiores dolore dolores impedit rem. Quod rerum nam eligendi qui amet blanditiis quia. In doloribus est et architecto eos laudantium dolorem nobis numquam quos

How to apply

Undergraduate Programs

Ut quia est aspernatur culpa quis debitis quos exercitationem consequatur possimus in iste occaecati quo. Et quibusdam iure rerum dolore possimus cum enim nobis sed rerum velit. Repellendus natus nostrum omnis reprehenderit consequatur laborum nesciunt et ea alias id porro quaerat

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-2">
  <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>Non dolores non labore. Ut debitis magnam atque at facere non voluptatem deserunt omnis non sint. Est amet adipisci nam repellat. Nihil non ipsa aut vitae dolorum excepturi autem aut consequatur dolore molestiae voluptatem</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>Aliquam non repellendus harum quia accusamus incidunt iusto sed praesentium optio. Aut dolor enim deserunt natus qui modi sint voluptatum quisquam est dolor. Voluptas earum rerum sed facere vero eos</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 3 .t-color-3

Applying as an Undergraduate?

Numquam nam a ut vel assumenda distinctio ipsum voluptatem repellendus enim et animi. Accusantium nisi veritatis id ut laborum illo rerum maxime aperiam. Id aut impedit consequuntur nihil in accusamus labore. Aperiam ab officia quae incidunt voluptatem repudiandae quia quod distinctio tempore dolor enim ut delectus

How to apply

Undergraduate Programs

Qui velit magnam quia nam quae consequatur distinctio alias. Cum esse eveniet quia eum quis aspernatur enim. Aspernatur est dolor autem exercitationem earum

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>Culpa quo et vero. Eum quo libero dolorem. Dolorem voluptates voluptas minima optio libero velit ut in consectetur. Doloribus et dolor vitae qui expedita molestias qui quisquam</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>Excepturi excepturi ipsam dicta perspiciatis ipsa. Animi voluptatem aut voluptatum qui sunt aliquam sit. Dolorum commodi et minima perspiciatis saepe voluptatum dolor facilis</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 4 .t-color-4

Applying as an Undergraduate?

Eveniet aut eum exercitationem quia minus recusandae est qui id vero nostrum quidem neque. Et quia in consectetur inventore omnis inventore inventore sit soluta dolorem pariatur et tenetur perferendis. Distinctio recusandae eos dolores. Natus cumque aut tempore atque omnis sint labore

How to apply

Undergraduate Programs

Quasi impedit pariatur voluptas dicta ex provident quo voluptatibus quia magni cumque quasi. Et quia laboriosam sint non tempore qui accusantium. Fugiat nulla id 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-4">
  <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>Repudiandae voluptatem omnis labore fugit repellendus. Voluptatem tempora cumque eum quia natus fugit omnis rerum blanditiis assumenda omnis eum. Nesciunt fuga soluta rem excepturi voluptas. Fugiat ipsum consectetur modi rerum ad consequuntur error reiciendis quo amet laudantium voluptatem</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>Sed odit quam non labore et veritatis officiis dolorem. Animi quas quo consequatur corporis harum est possimus non. Fugit sunt qui sunt nulla provident libero accusamus incidunt repellat quas</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 5 .t-color-5

Applying as an Undergraduate?

At aliquam iure natus et atque magnam aut dignissimos ab minus cum in non magnam. Eius quas hic beatae eum dolore dolore eligendi voluptatibus enim ab ut voluptas nam vitae. Quia quia officia aut molestias deleniti quos rerum officiis ut quidem rem voluptatum dolorem dolorum. Quidem eius molestiae qui similique eligendi asperiores quisquam necessitatibus

How to apply

Undergraduate Programs

Ut quia aut enim consequatur. Perspiciatis dicta placeat reprehenderit iure quo amet possimus amet iste sint quia ut sit. Ut error sed omnis deserunt dolores eum omnis qui dolor debitis numquam vel provident

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-5">
  <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>Perferendis qui ut autem. Eos dolorem quia at et voluptates voluptate velit mollitia adipisci. Non mollitia delectus provident eius nihil molestiae voluptas fugit. Velit et culpa ab voluptas velit odit architecto enim</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>Harum nihil necessitatibus numquam ipsam sequi dolor sint consequatur saepe sed fugit perferendis. Temporibus autem esse ratione quod consequatur hic deserunt aliquid eligendi earum. Ut facilis sed aut tenetur tempora totam itaque</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 6 .t-color-6

Applying as an Undergraduate?

Quia ipsam alias temporibus nostrum dolorem temporibus tempore dolorum perferendis. Autem dolor laborum voluptas ut et. Consequuntur adipisci rerum aut et laudantium assumenda sunt. Velit et ut ea hic repellat velit sequi voluptas

How to apply

Undergraduate Programs

Rerum officiis inventore consequatur non eveniet voluptas distinctio qui qui aspernatur odit. Consequatur cum unde in iure perspiciatis dignissimos sunt nam ratione hic voluptate facilis qui. Voluptatem error qui accusantium quo voluptas eaque distinctio sed qui

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>In deserunt facere unde id odio cumque. Minus qui occaecati est voluptates itaque amet magnam et qui earum a dolorum minus. Autem voluptas rerum aut ea sapiente quo. Aliquid provident qui molestias 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>Asperiores cupiditate fugit qui est quos id eos ad ex eum maxime esse voluptate eum. Maiores repellendus occaecati sit animi voluptatem consequatur veritatis et nulla. Quia a nesciunt molestias tempore aliquid inventore numquam aut ut soluta est voluptatem voluptas accusamus</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 7 .t-color-7

Applying as an Undergraduate?

Cupiditate est ratione quae consequatur porro ut modi iste voluptatibus adipisci aut sed qui. Distinctio quo inventore molestiae et dicta deleniti nihil et consequuntur odit atque. Quo et ut eos optio et dolore. Neque soluta molestiae unde fugiat numquam cumque et officiis et

How to apply

Undergraduate Programs

Saepe ipsum amet expedita in voluptas voluptatem. Laboriosam minus eos nostrum voluptate et cupiditate illum mollitia porro. Consequuntur officia omnis eveniet hic sint repellat suscipit hic ab aspernatur qui est 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-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>Et qui sit soluta est commodi saepe sequi rerum ut hic hic. Quisquam aut atque iusto eos perferendis eos consequatur ut. Qui blanditiis sed ut aspernatur quos vel repellendus nesciunt voluptas odit autem. Assumenda eum labore soluta</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>Harum qui et nam occaecati inventore libero. Reprehenderit ut at consectetur ut soluta quia saepe et soluta aperiam enim. Voluptatem fugiat hic sit dolore quo vero recusandae illum debitis magnam error architecto eaque cum</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 8 .t-color-8

Applying as an Undergraduate?

Ipsum consequatur sed repellat assumenda consequuntur sed pariatur voluptatem dolorum laborum. Voluptas vitae quaerat non illo facere quia distinctio. Saepe at sapiente iste enim dolor temporibus deleniti magnam repellendus ut voluptatem labore incidunt. Similique at perferendis et

How to apply

Undergraduate Programs

Fugiat odit aut excepturi consectetur aut non aut quae sint veritatis veritatis quis. Neque quas quod totam in facere corporis placeat impedit. Repudiandae nobis blanditiis occaecati maxime et voluptatem facilis accusamus id

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>Eligendi tempore dolor occaecati corporis voluptatem ut quibusdam et consectetur deserunt. Id ea voluptas aut aut voluptatibus rerum et cumque atque ut facilis dolor itaque. Facilis hic libero sed beatae quis voluptatem et. Qui quod nam consequatur et</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>Quis sed rem qui enim pariatur qui voluptatem quis at aspernatur. Culpa aliquam quia repudiandae nobis quo occaecati non expedita et inventore voluptates omnis sit. Odio dolorem impedit sint aperiam exercitationem et dolorem consectetur ex sed debitis</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 9 .t-color-9

Applying as an Undergraduate?

Omnis et totam qui et dolorum quo pariatur sed recusandae odit facilis laboriosam commodi suscipit. Et laboriosam commodi qui et omnis enim et maxime animi. Eaque asperiores consequatur dolorem earum. Eaque atque aliquid quidem in numquam

How to apply

Undergraduate Programs

Quibusdam earum quae ut. Quis provident aspernatur cupiditate ut tenetur illum laboriosam labore praesentium voluptate quaerat voluptates dolorum qui. Libero quae numquam dolore ut odio eveniet sed in veniam doloremque pariatur ut

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-9">
  <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>Vel delectus error culpa quaerat placeat velit. Et tempora commodi ut quo aut inventore tempora voluptatibus aut nemo quo in. Quis perspiciatis voluptas corrupti tenetur cum eum laborum aut qui quibusdam harum deleniti qui. Velit voluptatem exercitationem est est dolorem vel sit officiis suscipit modi</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>Est totam sit id exercitationem dolore. Maxime exercitationem qui dignissimos et est minima praesentium cum. Aut rerum itaque et maiores est recusandae velit dolorum ut beatae omnis quis dignissimos</p>
      <a href="#" class="more-link">Learn more</a>
    </div>
  </div>
</div>

Theme color: 10 .t-color-10

Applying as an Undergraduate?

Perferendis laudantium et ut ipsam nam. Quia aspernatur maiores quis qui sint assumenda nihil dicta provident officiis rem. Ut doloribus et tempore. Quas voluptates dolores eveniet labore quia minus voluptas rerum vero atque repellat nobis alias aliquid

How to apply

Undergraduate Programs

Harum nemo facere repellat sequi earum. Esse id quas rerum labore. Impedit odio eum qui eaque quo quia recusandae occaecati expedita

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-10">
  <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>Dolorem aspernatur aspernatur omnis illum nihil voluptas quia eum ut minima. Ea labore ipsum repellat sit beatae veritatis est. Sed impedit laudantium nobis. Tempore ut harum iusto qui et quibusdam quis ea voluptatibus reiciendis temporibus molestiae</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 nam esse occaecati repudiandae et iste voluptas sed. Nesciunt nihil laboriosam dolores. Facere aut sint qui blanditiis quisquam enim voluptatem vel</p>
      <a href="#" class="more-link">Learn more</a>
    </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>

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>

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>

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>

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>

List-form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="form list-form">
  <form action="#">
    <div class="form__group list-form__search">
      <div class="search search--dark">
        <div class="search__field-group">
          <input type="text" name="search" placeholder="Search for a program" class="form__control search__field">
          <button type="submit" class="search__button form__control">Search</button>
        </div>
      </div>
    </div>
    <div class="form__group list-form__filter">
      <select name="program-search-type" id="program-search" class="form__control form-select">
        <option value="majors">Majors</option>
        <option value="other1">Other option</option>
        <option value="other2">Something else</option>
      </select>
    </div>
  </form>
</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>

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>

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>

More-cta-cue

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

Page-title

Default

NOTE! Don't add this

"> 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
<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
8
<div class="landing">
<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>
</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 -->

Progress-indicator

1
<progress class="progress-indicator" value="0"></progress>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
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
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>
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>

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>

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>

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>

Light grey texture .row--light-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--light-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>

Blue texture w/ photo .row--blue-texture

A photo can be specified in the data-rl-row-photo data attribute

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" data-rl-row-photo="images/facade.jpg">
  <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 w/ gradient .row--blue-texture.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--blue-texture 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>

Blue texture w/ gradient and photo .row--blue-texture.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--blue-texture row--gradient" data-rl-row-photo="http://jam.domain7.net/redlands/1700/900">
  <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 w/ default photo .row--blue-texture.row--default-photo

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 row--default-photo" >
  <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>

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>

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

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>

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="Et nam quisquam cum nobis ut veniam vitae repellendus minima est" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider3" data-caption="Eligendi hic quidem qui molestiae quidem quos perspiciatis ducimus impedit nisi" alt="">
		<img src="http://jam.domain7.net/redlands/820/420/slider4" data-caption="Quo quaerat facilis aperiam qui nesciunt nihil ut aut deleniti qui tenetur dolor id expedita" alt="">
	</div>
	<div class="slider__ui">
		<div class="slider__slide-caption"></div>
		<div class="slider__nav"></div>

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

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>

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

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>

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>

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>