Style Guide
Heading 1
merriweather // font-size: 48px
Heading 2
merriweather // font-size: 36px
Heading 3
merriweather // font-size: 26px
Heading 4
proxima-nova // font-size: 36px
Heading 5
proxima-nova // font-size: 26px
Heading 6
proxima-nova // font-size: 22px
Heading 7
proxima-nova // font-size: 20px
Colors
Teal #48a9b8 rgba(72, 169, 184, 0.5) none repeat scroll 0 0; Orange #c84d0f rgba(200, 77, 15, 0.5) none repeat scroll 0 0; Light Seaglass #dff0e6 rgba(223, 240, 230, 0.5) none repeat scroll 0 0; Gold #fcc059 rgba(252, 192, 89, 0.5) none repeat scroll 0 0; Light Green #c9e5be rgba(210, 229, 190, 0.5) none repeat scroll 0 0; Seagulls dark #c7e5d4 rgba(223, 240, 230, 0.5) none repeat scroll 0 0; cream #f6f1ea rgba(246, 241, 234, 0.5) none repeat scroll 0 0; navy #1b477a rgba(27, 71, 122, 0.5) none repeat scroll 0 0;Button Styles
check out all the styles on Bootstrap's website https://getbootstrap.com/docs/4.0/components/buttons/
btn-primary btn-lg btn-secondary btn-calltoaction btn-alternative btn-light btn-level
Banners and Lightboxes
Lightbox Pop-ups (800x500px)
Hompage Slideshow (1920x660px)
Interior Page Banner (1920x450px)
Writing Styles and HTML code hints
Em DashWhen using a dash, make it an em dash (the longest dash) and put a space on both sides.
View example here.
Remove all serial/Oxford commas
SpaceThere should only be one space after a period.
Headline StyleHeadline style is upper and lower case, commonly called, "Title Case.
Hyphenated Words in HeadlinesHyphenated words in headlines and in buttons should be Title-Case. Both words are capitalized.
Using Nut GrafOur website style uses a short paragraph called a "Nut Graf" opposed to subheads. Therefore, under the headline should be a full sentence that includes punctuation.
What is a Nut Graf?
A nut graph is a paragraph that explains the context of the story. The term is also spelled as nut graf, nut 'graph, nutgraph, nutgraf. It is a contraction of the expression nutshell paragraph. In our case, the Nut Graf will be a short sentence that follows the headline. It should simply explain in a sentence what the page is about and end with a period.
Buttons should be Title Case, never all caps
And vs &Use "and" as opposed to an ampersand (&), except for Pilar & Chuck Bahde Wildlife Center and Pilar & Chuck Bahde Center for Shelter Medicine.
Phone Number Style
Phone style is 619-299-7012, ext. 2316. Not (619) Not 619.799.7012.
Hyperlink to a Phone Number (with non-breaking)
619-299-7012
<span style="white-space: nowrap;"><a href="tel:6192997012";">619-299-7012</a> <span>
Non-Breaking Phone Numbers
<span style="white-space:nowrap;">619-299-7012</span>
Bulleted Lists
Bulleted lists use punctuation when there are sentences or phrases (incomplete sentences).
If there is only one word/item (like a company name, program, etc.) per bullet, cap the first letter and use no punctuation.
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3<ol>
<li>List Item 3.1</li>
<li>List Item 3.2<ol>
<li>List Item 3.2.1</li>
<li>List Item 3.2.2</li>
</ol></li>
<li>List Item 3.3</li>
</ol></li>
<li>List Item 4</li>
</ol>
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2
<ul>
<li>List Item 3.2.1</li>
<li>List Item 3.2.2</li>
</ul>
</li>
<li>List Item 3.3</li>
</ul>
</li>
<li>List Item 4</li>
</ul>
Definition List
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
<dl>
<dt>Definition Term 1</dt>
<dd>Definition Description 1</dd>
<dt>Definition Term 2</dt>
<dd>Definition Description 2</dd>
</dl>
Sub-heading in orange color:
<span style="font-size: 1.175em; color: #c84d0f;">Insert Your Text Here</span>
Gary's Signiture
Gary Weitzman, DVM, MPH, CAWA
President and CEO
Or copy this code
<p><img alt="Gary Name" border="0" height="68" id="_x0000_i1025" src="https://www.sdhumane.org/about-us/leadership/images/gary_signature.png" width="100" /><br /> Gary Weitzman, DVM, MPH, CAWA<br /> President and CEO</p>
Responsive Photos for Stories
Stories do not use the Standard Image in the Body Copy. If you want an image, you have to manually add it in Body Copy, then add the "img-responsive" class.
Example Code
<img class="img-responsive" src="YOUR-IMAGE-HERE" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Blockquote
This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."
This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Figure-Caption
Details-Summary
The details example text. It may be styled differently based on what browser or operating system you are using.The summary element example
Text Elements
The abbr element and an abbr element with title examples
The ACRONYM element example
The b element example
The cite element example
The code element
example
Thedata elementexample
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example
The q element
exampleinside
a q element
The s element example
Thesamp elementexample
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The example
The u element example
The var element example