Action link

half

1/2 width:

  • 488px by 236px
  • Text is h4
  • Arrow: 26px by 32px

third

1/3 width:

  • 480px by 360px
  • Text is h4
  • Arrow: 26px by 32px

Color options for action links: 

colors

Link List

“Link List” is for 10 or fewer links (if you have more than 10, consider adding another link farm and sort the links into organized categories.)

Pre-heading: H6
Heading: H5

Links:
Arial, bold, 12px, line-height: 16px
(space between links: 14px)
Color: #333333
Hover: Underline 

Background colors always the lightest of the color shades.

2px rule: always the core color that matches the background. When there is no background color the rule can be any color.

Link lists can be 1/2 or 1/3 with one column of links.

link list
Stats

Number: Arvo regular approx 168 px; -30 tracking; # signs and ordinals (1st, 2nd) should be superscript

Below number: Arvo regular 52px,  -30 tracking

Detail text: Arial 26 px with 34 px line spacing; #333333, centered text

Color: Background colors always the lightest of the color shades. Large text always the core color that goes with the background color.

stats

Photo Stat/Info:

White rectangle is at 70% opacity.

Number: Arvo, color: #450084

Blurb: Arial

stats
WYSIWYG

The “what you see is what you get” (wysiwyg) builder allows any content and format within the block. This example has a colored heading to add interest. 

If using the colored header, the header will be H5, see the “text + background combos” section for color combinations. 

wysiwyg
Feed
Two-thirds width feed 

allows four tabs maximum.

Screen width 481 and above
Tabs measure 90px x 40px
Tab text is Arvo 16px all caps, centered
Text  should be centered vertically within tab
For feeds with images: Images are 5:3 ratio, 126w
When no image is provided the text will fill the entire space
Body text is 14px Arial Regular #333333 with 18px line height
News headlines are 14px Arial Bold #450084 with 18px line height

two thirds

480 and below
Same as 481-768 break except ...
Tabs measure 75px x 52 px
Tab text is Arvo Regular 15px all caps, centered
Headlines only (no teaser text) centered vertically next to the images

feed
One-half width feed 

Three tabs allowed

Screen width 769 and above
Tabs measure 87px x 40 px
Tab text is Arvo 16px all caps, centered
Text  should be centered vertically within tab
For feeds with images: Images are 5:3 ratio
When no image is provided the text will fill the entire space (see example.)
Body text is 14px Arial Regular #333333 with 16px line height
News headlines are 14px Arial Bold #450084 with 18px line height

two thirds

480 and below
Same as this break for the two-thirds block except...
Same as specs above for 769 width except...
No images

feed
One-third width feed 

Two tabs allowed

Screen width 769 and above
Tabs measure 84px x 40px
Tab text is Arvo 16px all caps, centered
Text  should be centered vertically within tab
No images ever.
Body text is 14px Arial Regular #333333 with 18px line height
News headlines are 14px Arial Bold #450084 with 16px line height

two thirds

768 and below
same specs as above

feed
Events tab — specs for text

Screen width 769 and above
Date is Arial Bold #450084, 12px with 14px line height
Event title is Arial Regular #333333, 12px with 14px line height
Space between each event is 3px

two thirds

481-768
Same as 769 above except...
Date is Arial Bold #450084, 14px with 18px line height
Event title is Arial Regular #333333, 14px with 18px line height

feed

320-480
Same as 481-768 break
Space between each event changes from 3px to 10px

feed
Spacing for all feeds

Padding to the left of the image is 15px
Padding between image and text is 10px
Padding above image is 15px
Padding between news items is 10px
Border below and between tabs: 2px, color: #ffffff

spacing

Back to Top