Typography
Typography • Content & Block Types • Iconography • Block Regions
This page provides information regarding the stylistic rules for your website. It includes instructions for a varity of elements and links to videos on how to use these various stylings.
Your website will need to have been configured to use these functions. If you find these don’t work the way you feel it should or need additional help, please contact Tribute Media for additional support.
- Brand Colors
- Headings
- General Styles
- Images
- Buttons & Links
- Tables
- Search
- Status Messages
- Pagination
- Blocks
Brand Colors
Default Background
Dark Background
Headings
How to apply secondary and accent styles to headings 2 - 6.
| Heading | Detail |
|---|---|
Heading 1 |
This is the main heading on your webpage. Each webpage should have only one H1. This is the default style for Heading 1. |
Heading 1 - Secondary |
You might need a secondary version of your heading. While the H1 is a little more difficult to adjust, the process for making the H1 a secondary is the same for all headings. Simply add a class of "secondary" to your Heading. For the H1, this is an advanced technique but Headings 2-6 are the same and a basic technique. |
Heading 1 - Accent |
You might need an accent version of your heading. While the H1 is a little more difficult to adjust, the process for making the H1 an accent is the same for all headings. Simply add a class of "accent" to your Heading. For the H1, this is an advanced technique but Headings 2-6 are the same and a basic technique. |
Linked H1 |
This is the main heading on your webpage when it's linked. This will likley never occur but the styling should be available for the rare time it is used. |
Linked H1 - Secondary |
If your heading is secondary and a link, this is how it will appear. |
Linked H1 - Accent |
If your heading is accent and a link, this is how it will appear. |
Heading 2 |
This is the default sub-head. This heading is used for all block titles and should be used for main topics inside your main content area. This is the default style for Heading 2. |
Heading 2 - Secondary |
Add the class of "secondary" to this heading for this style. |
Heading 2 - Accent |
Add the class of "accent" to this heading for this style. |
Linked H2 |
This is the default sub-head when linked. This is the default style for Heading 2 when it is a link. |
Linked H2 - Secondary |
If this heading is secondary and a link, this is how it will appear. |
Linked H2 - Accent |
If this heading is accent and a link, this is how it will appear. |
Heading 3 |
This is the default styling for this sub-head (3rd level). Use this for sub-topics on a page below Headings 2. |
Heading 3 - Secondary |
Add the class of "secondary" to this heading for this style. |
Heading 3 - Accent |
Add the class of "accent" to this heading for this style. |
Linked H3 |
This is the default styling for this sub-head (3rd level) when linked. |
Linked H3 - Secondary |
If this heading is secondary and a link, this is how it will appear. |
Linked H3 Accent |
If this heading is accent and a link, this is how it will appear. |
Heading 4 |
This is the default styling for this sub-head (4th level). Generally this is used for stylistic purposes. Search engines will consider it less important than Headings 1-3. |
Heading 4 - Secondary |
Add the class of "secondary" to this heading for this style. |
Heading 4 - Accent |
Add the class of "accent" to this heading for this style. |
Linked H4 |
This is the default styling for this sub-head (4th level) when linked. |
Linked H4 - Secondary |
If this heading is secondary and a link, this is how it will appear. |
Linked H4 - Accent |
If this heading is accent and a link, this is how it will appear. |
Heading 5 |
This is the default styling for this sub-head (5th level). Generally this is used for stylistic purposes. Search engines will consider it less important than Headings 1-4. |
Heading 5 - Secondary |
Add the class of "secondary" to this heading for this style. |
Heading 5 - Accent |
Add the class of "accent" to this heading for this style. |
Linked H5 |
This is the default styling for this sub-head (5th level) when linked. |
Linked H5 - Secondary |
If this heading is secondary and a link, this is how it will appear. |
Linked H5 - Accent |
If this heading is accent and a link, this is how it will appear. |
Heading 6 |
This is the default styling for this sub-head (6th level). Generally this is used for stylistic purposes. Search engines will consider it less important than Headings 1-5. |
Heading 6 - Secondary |
Add the class of "secondary" to this heading for this style. |
Heading 6 - Accent |
Add the class of "accent" to this heading for this style. |
Linked H6 |
This is the default styling for this sub-head (6th level) when linked. |
Linked H6 - Secondary |
If this heading is secondary and a link, this is how it will appear. |
Linked H6 - Accent |
If this heading is accent and a link, this is how it will appear. |
Wrapping Headers
When headings wrap, this will indicate how their line height will work.
This is the Heading 1 that is too long to fit on one line.
This is the Heading 3 that is too long to fit on one line.
This is the heading 5 that is too long to fit on one line, and since the text is smaller, it needs more text to wrap.
This is the Heading 2 that is too long to fit on one line.
This is the heading 4 that is too long to fit on one line but the text is smaller so it needs more text to wrap.
This is the Heading 6 that is too long to fit on one line. This has to have more text to wrap more because it's so tiny.
General Styles
Paragraphs Default Background
This is how a standard link will look: Standard Link. If you'd like the secondary link, this is how it will look: Secondary Link. The emphasized links provide a little carot after them to stand out just a little bit more. Typically, you'll want them to live on a line by themselves. If you do an Emphasized Link in the middle of a paragraph, that is how it will look. If you want it separate, see below this paragraph to see how it stands out.
In addition to links, there are other common elements you will work with. If you need a superscript then it would look like this. You could also have a subscript that looks like this. You might also choose to have something struck-through. Of course, the most common would be something bold or you might have something just italicized. There is always underline as well.
In the section below, you'll see how the two most common list types are presented.
Ordered List
- First List Item
- Linked item
- Nested List Item
- Level 2
- Level 2 Too
- Nested Again
- Level 3
- Level 3 Too
- Back to Level 1
- Last Item
Unordered List
- First List Item
- Linked item
- Nested List Item
- Level 2
- Level 2 Too
- Nested Again
- Level 3
- Level 3 Too
- Back to Level 1
- Last Item
When you have a quote that you'd like to standout, the block quote is the way to do it. Typically, you'd write the quote in the block quote tag and then put the author information below. But, the author information could be in the blockquote as well, if you like.
A horizontal rule is the simplest of dividers. Below this paragraph is a horizontal rule.
Although most companies will never use it, here is how the code tag would appear.
/*line 1*/
/*line 2*/
Paragraphs - Dark Background
This is how a standard link will look: Standard Link. If you'd like the secondary link, this is how it will look: Secondary Link. The emphasized links provide a little carot after them to stand out just a little bit more. Typically, you'll want them to live on a line by themselves. If you do an Emphasized Link in the middle of a paragraph, that is how it will look. If you want it separate, see below this paragraph to see how it stands out.
In addition to links, there are other common elements you will work with. If you need a superscript then it would look like this. You could also have a subscript that looks like this. You might also choose to have something struck-through. Of course, the most common would be something bold or you might have something just italicized. There is always underline as well.
In the section below, you'll see how the two most common list types are presented.
Ordered List
- First List Item
- Linked item
- Nested List Item
- Level 2
- Level 2 Too
- Nested Again
- Level 3
- Level 3 Too
- Back to Level 1
- Last Item
Unordered List
- First List Item
- Linked item
- Nested List Item
- Level 2
- Level 2 Too
- Nested Again
- Level 3
- Level 3 Too
- Back to Level 1
- Last Item
When you have a quote that you'd like to standout, the block quote is the way to do it. Typically, you'd write the quote in the block quote tag and then put the author information below. But, the author information could be in the blockquote as well, if you like.
A horizontal rule is the simplest of dividers. Below this paragraph is a horizontal rule.
Although most companies will never use it, here is how the code tag would appear.
/*line 1*/
/*line 2*/
Images
How to upload an image and float the image right or left.
If you would like your image to float left on desktops, then be full width on mobile devices, add a class of "float left" to your image.
Since this text is just filler text to demonstrate how the image can float the left or right (or centered) we have lightened it so that you don't waste your time reading it. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
If you would like your image to be centered, you can either use the editor to align center, or add a class of "center" to your image.
Since this text is just filler text to demonstrate how the image can float the left or right (or centered) we have lightened it so that you don't waste your time reading it. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
If you would like your image to float right on desktops, then be full width on mobile devices, add a class of "float right" to your image.
Since this text is just filler text to demonstrate how the image can float the left or right (or centered) we have lightened it so that you don't waste your time reading it. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Buttons & Links
How to style links into buttons.
Links Default BG
Links Dark BG
Buttons Default BG
Links with class(s) added:
Hover over a button below for additional detail.
You can also use icons with any button by adding the icon class to it.
Buttons Dark BG
Links with class(s) added:
Hover over a button below for additional detail.
You can also use icons with any button by adding the icon class to it.
Note on text in buttons:
Buttons, by their nature, are designed to have smaller amounts of content. They are intended for a few words and not long statements or sentences. By default, the text on buttons will not wrap to the next line. Longer text links likely should be formatted as emphasized links. Sometimes, you want to go rogue and have a long button anyway. If you want the text to wrap, you can add a class of wrap-text to the button link.
Sometimes you just need to make sure it wraps on mobile devices. That would be rare, but if that's the case, add a class of wrap-text-mobile to your button link.
Table View
How to create and style a table.
Tables provide a way to separate a lot of data into a more readable format. However, tables may not look the best on mobile devices.
When data is automatically formatted into a table (we use the views module to do this), then this table view shows how the views module will provide a table view. But when you create your own table, you'll need to add the classes necessary. This table uses the classes of "table table-responsive table-hover table-striped". (Note to developer: if you update the classes in views-view-table.html.twig, be sure to update the classes here as well.)
Sample Table View - Default BG
| Title | Updated/commented date | Icon | Promoted to front page | Authored by | Authored on |
|---|---|---|---|---|---|
| Short title sample | Wed, 01/22/2020 - 15:44 |
|
On | Site Manager | Mon, 01/20/2020 - 16:25 |
| Title sample a little longer | Tue, 02/11/2020 - 14:14 |
|
On | Site Manager | Mon, 01/20/2020 - 16:23 |
| This title is much longer than the others. | Tue, 02/11/2020 - 14:15 |
|
On | Site Manager | Mon, 01/20/2020 - 16:16 |
| Just a title | Tue, 02/11/2020 - 14:15 |
|
On | Site Manager | Mon, 01/20/2020 - 16:09 |
| Just another title | Tue, 02/11/2020 - 14:14 |
|
On | Site Manager | Mon, 01/20/2020 - 16:04 |
Sample Table View - Dark BG
| Title | Updated/commented date | Icon | Promoted to front page | Authored by | Authored on |
|---|---|---|---|---|---|
| Short title sample | Wed, 01/22/2020 - 15:44 |
|
On | Site Manager | Mon, 01/20/2020 - 16:25 |
| Title sample a little longer | Tue, 02/11/2020 - 14:14 |
|
On | Site Manager | Mon, 01/20/2020 - 16:23 |
| This title is much longer than the others. | Tue, 02/11/2020 - 14:15 |
|
On | Site Manager | Mon, 01/20/2020 - 16:16 |
| Just a title | Tue, 02/11/2020 - 14:15 |
|
On | Site Manager | Mon, 01/20/2020 - 16:09 |
| Just another title | Tue, 02/11/2020 - 14:14 |
|
On | Site Manager | Mon, 01/20/2020 - 16:04 |
Search Options
Exposed Filter
The exposed filter will show at the top of views (listing) pages. For example, if you'd like to have a search function at the top of a blog listing page or a careers listing page, you can have multiple filters exposed to the visitor.
Search
Search form
This is the search form as it would appear throughout the site. Sometimes there is a little more configuration needed to make it work properly. You can, through various settings, make it narrower. The default view (though not shown on this page) will change to an icon on mobile devices. If you need help to adjust the point at which it changes to an icon, please ask Tribute Media support for assistance.
Status Messages
These status messages will appear at the top of the page. For example, when you save a page after editing, you'll see the green status message at the top of the page.
Pagination
Pagination will appear at the bottom of list pages when there is more than one page to view. The mini version might be used when that pager needs to appear in a locaiton that is more narrow such as a sidebar block.
Full Pager
Mini Pager
Blocks
Blocks Default Background
How to apply stylings to blocks.
Simple Block Styles
Blocks live in regions on your page. Usually the default block style is great for your website's design. You may choose to apply additional styles via classes to those blocks. This section will show you how those various classes will affect the block style. The description in each block will indicate which class(s) to add to the block.
Default Block
This is the default view of a block. When creating a block, it will naturally be styled to match this block.
Callout Block
Outlined Block
Secondary Style
Transposed Style
Multiple Styles
List Views
Additional Block Classes
Sometimes the default block styles cause challenges in the presentation of those blocks. The most common issues you might find will be additional height or additional padding to the blocks. These two issues are caused by the clearfix class or the padding around the block. If you have too much height and can't figure out why that is the case, you might try the class "no-clearfix". Sometimes it's just a little extra padding. For those instances we have the class of "no-padding" which removes the padding around the block completely. We also have the class of "no-padding-x" which remove right and left padding or the class of "no-padding-y" to remove the padding on the top and bottom.
Blocks Dark Background
How to apply stylings to blocks.
Simple Block Styles
Blocks live in regions on your page. Usually the default block style is great for your website's design. You may choose to apply additional styles via classes to those blocks. This section will show you how those various classes will affect the block style. The description in each block will indicate which class(s) to add to the block.
Default Block
This is the default view of a block. When creating a block, it will naturally be styled to match this block.
Callout Block
Outlined Block
Secondary Style
Transposed Style
Multiple Styles
List Views
Additional Block Classes
Sometimes the default block styles cause challenges in the presentation of those blocks. The most common issues you might find will be additional height or additional padding to the blocks. These two issues are caused by the clearfix class or the padding around the block. If you have too much height and can't figure out why that is the case, you might try the class "no-clearfix". Sometimes it's just a little extra padding. For those instances we have the class of "no-padding" which removes the padding around the block completely. We also have the class of "no-padding-x" which remove right and left padding or the class of "no-padding-y" to remove the padding on the top and bottom.