Website Style Guide - 2026
Heading One Sample
Heading Two Sample
Heading Three Sample
Heading Four Sample
Heading Five Sample
*You can mimic the look of a heading by adding class=“nr-mimic-h#” to any <h#> tag. Example:
<h2 class=“nr-mimic-h1”> That would make an secondary <h2> heading look like a primary <h1> without interrupting the HTML content structure of your page.
Here is a sample paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing internal anchor link 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 external anchor link 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.
Here is some bold/strong text.
Here is some italic/emphsized text.
This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget condimentum leo. Integer ut libero lectus. Donec nisl arcu, sagittis ac est eget, interdum cursus purus. Quisque in lobortis eros. Vivamus euismod dignissim tellus, eget fermentum quam lacinia eget. Proin ut pharetra augue, nec aliquam massa. Nunc commodo sem non suscipit suscipit.
.(JavaScript must be enabled to view this email address)
Link to a page or document within the website
Accordion
- Accordion Row 1
Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus ornare fringilla porta, eros inceptos eros ipsum potenti imperdiet. Volutpat pellentesque nascetur est venenatis ac. Primis ultricies per at blandit pretium tristique ac malesuada accumsan? Id montes eget pellentesque; etiam molestie suspendisse. Ornare quam sapien rutrum natoque nascetur porttitor hendrerit. Accumsan ipsum scelerisque hac nullam vestibulum sociosqu porttitor. Et convallis elementum hendrerit nullam magnis curae nascetur at sociosqu. Praesent nostra litora morbi natoque pretium litora.
- Accordion Row 2 (with a link)
Nibh velit netus justo nulla at arcu curabitur tempus. Iaculis volutpat rhoncus cubilia sollicitudin commodo ultrices ultricies. Ac per eleifend sapien ligula venenatis erat torquent. Mollis ultrices pharetra dignissim montes ex placerat cursus. Sapien dui torquent ultricies; sodales feugiat fringilla. Quam sollicitudin dolor quisque rhoncus, eu neque volutpat. Tempus dapibus conubia cursus tortor turpis a orci. Platea nam porta curabitur mi cubilia rutrum. Eget vulputate mi himenaeos eros, suspendisse commodo leo porta pharetra. Non vitae dictum elementum nam parturient auctor.
Columns
May be used for a 2-column or 3-column layout. Stacks for mobile.
Amet fermentum lectus magna erat facilisis a platea. Cubilia curabitur felis sem praesent, enim fermentum. Feugiat convallis cubilia ultrices; elit nunc sodales. Suscipit placerat semper condimentum ipsum magna nisi quam. Netus elementum dis velit nec pulvinar lacinia phasellus. Viverra curae sociosqu fermentum ante montes. Tempor vivamus proin id ex vestibulum nisl; mi per. Tortor mi nibh efficitur, volutpat sollicitudin vel iaculis metus.
Facilisi pellentesque ligula orci rhoncus himenaeos eros malesuada. Malesuada aliquet cursus ad massa, commodo augue tempor congue. Eleifend commodo malesuada erat erat metus. Volutpat tincidunt finibus sodales felis turpis gravida convallis.
Laoreet ridiculus taciti ornare morbi mauris sem maximus est. Quis purus lacus vel odio sagittis ligula mus consequat. Convallis nascetur luctus torquent massa rutrum pulvinar mus accumsan. Cubilia quis posuere nascetur tellus eleifend est urna. Et ultricies semper maecenas ullamcorper lacinia pretium justo.
Tables
May be used for a 2-column, 3-column or 4-column table. Maintains orientation of table cells on mobile, so it is not suitable for a lot of text or paragraphs.
|
Table Header Column One |
Table Header Column Two |
Table Header Column Three |
Table Header Column Four |
|---|---|---|---|
|
Table Row One Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Table Row Two Text |
Table Row Three Text |
Table Row Four Tex |
|
Table Row One Text |
Table Row Two Text Lorem |
Table Row Three Text Netus elementum dis velit nec pulvinar lacinia phasellus. |
Table Row Four Text |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Table Row Two Text |
Table Row Three Text |
Viverra curae sociosqu fermentum ante montes. |
Bullets and Numbers Lists
Bulleted lists
UL stands for “Unordered List” AKA Bulleted
LI stands for “List Item”
<ul>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ul>
Numbered lists
OL stands for “Ordered List” AKA Numbered
LI stands for “List Item”
<ol>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ol>
Multi level list
UL with Sub Items
<ul>
<li> list item </li>
<li> list item
<ul>
<li> sub list item </li>
<li> sub list item </li>
</ul>
</li>
<li> list item </li>
</ul>
How they look in your website
- Parent List Item
- Parent List Item with Children
- Child 1
- Child 2 with Grand Children
- Grand Child 1
- Grand Child 2
- Parent List Item
- Parent List Item
- Parent List Item
Button Examples
Blue (anchor)
nr-button nr-button-blue
nr-button nr-button-teal
Gray
nr-button nr-button-gray
nr-button nr-button-blue
Orange
nr-button nr-button-orange
Add Caption Button
The add-caption button creates a CSS Style Class called “add-caption” that can be added to an image tag. Once added, the image’s alt-text is displayed as a caption, under the image, as you see in this image of Ache Cape Oregon.
