Design Guidelines FOR THE WEB
Logo .svg (gold foil fill)
{% include 'partials/vector/rta-logo-gold.html' %}
{% include 'partials/vector/rta-wordmark-gold.html' %}
.svg
<img src="{% static 'images/vector/rta-logo.svg' %}" />
<img src="{% static 'images/vector/rta-wordmark.svg' %}" class="rta-logo-wordmark" />
Grid System 10 Columns
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-6
.col-sm-6
.col-sm-8
.col-sm-4
.col-sm-7
.col-sm-5
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
<div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-7">.col-sm-7</div> <div class="col-sm-5">.col-sm-5</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div>
Thin Container
.col-sm-6
.col-sm-6
<div class="container-thin">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
Purples
#E1DBF0
#B3A6D9
#8570C2
#523D8F
#342366
#1B0E3D
Greys
#F7F7F7
#EDEDED
#E7E7E7
#DADADA
#B8B8B8
#727272
#202020
Golds Use sparingly
#FFFBBF
#FCE77E
#EBB92F
Freight Sans Pro Body font
Freight Sans Book
Freight Sans Bold
Freight Sans Bold
<h3 class="font-freight font-freight-book">Freight Sans Book</h3> <h3 class="font-freight font-freight-medium">Freight Sans Bold</h3> <h3 class="font-freight font-freight-bold">Freight Sans Bold</h3>
Freight Big Pro Header font
Freight Big Bold
<h3 class="font-freight-big font-freight-big-bold">Freight Big Bold</h3>
Nimbus Sans Extended With letter spacing
Nimbus Extended
<h2 class="font-nimbus-default">Nimbus Extended</h2>
Font Sizing
H1
H2
H3
H4
H5
H6
.font-xs, $rta-font-xs, 12px
.font-sm, $rta-font-sm, 14px
.font-md, $rta-font-md, 19px
.font-lg, $rta-font-lg, 23px
.font-xl, $rta-font-xl, 30px
<a href="#" class="btn btn-default">Default Button</a> <a href="#" class="btn btn-purple">Purple Button</a> <a href="#" class="btn btn-gold">Gold Button</a> <a href="#" class="btn btn-gold-foil">Gold Foil Button</a>
<a href="#" class="btn btn-outline">White Button</a> <a href="#" class="btn btn-outline btn-grey">Grey Button</a> <a href="#" class="btn btn-outline btn-purple">Purple Button</a>
Heading with Rule Optional link
Featured Members
{% heading "primary" "Featured Members" False %}
Featured Members
View All
{% heading "secondary" "Featured Members" "member_listing" %}
Link with Rule
<a href="#" class="link-with-rule">
View All <i class="fa fa-chevron-right"></i>
</a>
Person module Standalone or in a grid
Harry Potter
Student, Hogwarts School of Witchcraft and Wizardry
{% include 'academy/partials/person-module.html' %}
Harry Potter
Student, Hogwarts School of Witchcraft and Wizardry
Harry Potter
Student, Hogwarts School of Witchcraft and Wizardry
{% include 'academy/partials/person-module.html' with grid=True %}
{% include 'academy/partials/person-module.html' with grid=True %}
Corporate member module Standalone or in a grid
{% include 'corporate_members/partials/member-module.html' with name=True member_url=False %}
Connect Sidebar
{% include 'academy/partials/sidebar-connect.html' with person=sidebar_person %}
News Item Large
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Pharetra Ridiculus Egestas Sollicitudin.
April 19, 2024
Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa j...
Read More —
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Pharetra Ridiculus Egestas Sollicitudin.
April 19, 2024
Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa j...
Read More —
{% include "news/partials/news-item-large.html" %}
{% include "news/partials/news-item-large.html" %}
News Item Small
{% include "news/partials/news-item-small.html" %}
{% include "news/partials/news-item-small.html" %}
All Content and Design © Sawhorse Media 2015. Check out our humans.txt to find out more about the people responsible for this website!