Typography

TypographyContent & Block TypesIconographyBlock 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

Default Background

 
Brand Color 1
 
Brand Color 2
 
Brand Color 3
 
Brand Color 4
 
Brand Color 5
 
Brand Color 6

Dark Background

 
Brand Color 1
 
Brand Color 2
 
Brand Color 3
 
Brand Color 4
 
Brand Color 5
 
Brand Color 6

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

Text editor overview.

Paragraphs Default Background

 
Font Color
Link Color
Link Hover
Link Color 2
Link Hover 2
 

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.

Secondary Emphasized Link

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

  1. First List Item
  2. Linked item
  3. Nested List Item
    • Level 2
    • Level 2 Too
    • Nested Again
      • Level 3
      • Level 3 Too
  4. Back to Level 1
  5. 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

 
Font Color
Link Color
Link Hover
Link Color 2
Link Hover 2
 

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.

Secondary Emphasized Link

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

  1. First List Item
  2. Linked item
  3. Nested List Item
    • Level 2
    • Level 2 Too
    • Nested Again
      • Level 3
      • Level 3 Too
  4. Back to Level 1
  5. 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.

Dog on Wave

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.


Dog on Wave

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.


Dog on Wave

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.

How to style links into buttons.

Links Default BG

Link Color
Link Hover
Link Color 2
Link Hover 2
 

Links Dark BG

Link Color
Link Hover
Link Color 2
Link Hover 2
 

Buttons Default BG

 
Primary BG
 
Primary BG Hover
 
Secondary BG
 
Secondary BG Hover
 
Transposed BG
 
Transposed BG Hover
 
Outline Border
 
Outline Border Hover
 

 

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.

How to use icons in buttons.

Buttons Dark BG

 
Primary BG
 
Primary BG Hover
 
Secondary BG
 
Secondary BG Hover
 
Transposed BG
 
Transposed BG Hover
 
Outline Border
 
Outline Border Hover
 

 

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.

How to use icons in buttons.

 

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

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

Blocks

Blocks Default Background

How to apply stylings to blocks.

Simple Block Styles

 
Secondary BG
 
Secondary Font Color
 
Transposed BG
 
Transposed Font Color
 
Border Colors
 

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

Dog on Wave

This is the default view of a block. When creating a block, it will naturally be styled to match this block.

Link Here!

Callout Block

Dog on Wave

This callout block requires adding a class of "callout" to the class field.

Link Here!

Outlined Block

Dog on Wave

This outlined block requires adding a class of "outline" to the class field.

Link Here!

Secondary Style

Dog on Wave

This secondary style block requires adding a class of "secondary" to the class field.

Link Here!

Transposed Style

Dog on Wave

This transposed style block requires adding a class of "transposed" to the class field.

Link Here!

Multiple Styles

Dog on Wave

You can add multiple style for combined effects. This block has "callout secondary".

Link Here!

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

 
Secondary BG
 
Secondary Font Color
 
Transposed BG
 
Transposed Font Color
 
Border Colors
 

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

Dog on Wave

This is the default view of a block. When creating a block, it will naturally be styled to match this block.

Link Here!

Callout Block

Dog on Wave

This callout block requires adding a class of "callout" to the class field.

Link Here!

Outlined Block

Dog on Wave

This outlined block requires adding a class of "outline" to the class field.

Link Here!

Secondary Style

Dog on Wave

This secondary style block requires adding a class of "secondary" to the class field.

Link Here!

Transposed Style

Dog on Wave

This transposed style block requires adding a class of "transposed" to the class field.

Link Here!

Multiple Styles

Dog on Wave

You can add multiple style for combined effects. This block has "callout secondary".

Link Here!

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.

208.938.9726