Web Standards Style Guide

  1. Brand Colors
  2. Typography
  3. Icons
  4. Tables
  5. Buttons and Links
  6. Images
  7. Image Galleries
  8. Video
  9. Media Card
  10. Linkblock
  11. Callouts and Borders
  12. Columns and Grids
  13. Misc. Content Elements
  14. Campus Cross-Reference Styles

 

Brand Colors

Berklee Red:

Berklee Red red Berklee Red Looks Like This
#D81118

rgb(216, 17, 24)
Boston Conservatory Blue    
#005587

 

Color Value to use in short-codes Example hex/rgb
Pearl    
#F1F5F6

rgb(241, 245, 246)
Light Gray  light-gray Light Gray Looks Like This
#ccc
Gray gray Gray Looks Like This
#4C5960

rgb(123, 139, 150)
Dark Gray dark-gray Dark Gray Looks Like This
#7B8B96

rgb(76,89,96)
Charcoal charcoal Charcoal Looks Like This
#25353C

rgb(37, 53, 60)
Fire Brick fire-brick Fire Brick Looks Like this
#A52047

rgb(165,32,71)
Squash squash Squash Looks Like This
#EE862D

rgb(238,134,45)
Sea Green sea-green Sea Green Looks Like This
#16AC96

rgb(22,172,150)
Beach Blue beach-blue Beach Blue Looks Like This
#078BAA

rgb(7, 139, 170)
Prince Purple prince-purple Prince Purple Looks Like This
#595B9A

rgb(89,91,154)
Cherry    
#EE243C

rgb(238,36,60)

Scroll to top


Typography

Font Family

Berklee.edu uses Nunito Sans for all body text and headers (a close match to Avenir, the official Berklee font). For the top global header, we use an ALL CAPS condensed Carrois Gothic font.

Headers

NOTE: H1 tags are added programmatically to the title of each node. They should not be used within the page.

This is an H2

Paragraph below an H2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is an H3

Paragraph below an H3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is an H4

This is an H5
This is an H6

Formatting

This is a regular paragraph. Paragraphs can include bold italic underlined, or strikethrough text.

Paragraph text may be indented in increments of 40px up to 120px.

Indentation of 40px.

Indentation of 80px.

Indentation of 120px.

  1. This
  2. Is
  3. A
  4. Numbered
  5. List
    1. First Child
    2. First Child
      1. Second Child
      2. Second Child

 

  • This
  • Is
  • An
  • Unordered
  • List
    • First Child
    • First Child
      • Second Child
      • Second Child

 

Scroll to top

Icons

For working within a basic page, you can embed any (free) fontawesome icon. But you have to do it from the source code view (it won't show up on the wysiwyg view).

In the source view, format the code like this: 

<p><span class="fa fa-envelope-o">&nbsp;</span>

(the non-breaking space code is needed, otherwise the editor tries to wipe out the empty span class when you save the page).

The fa fa-envelope-o part is what you'd get from the fontawesome icon page.

To make the icon larger, add "fa-2x" 

<p><span class="fa fa-envelope-o fa-2x">&nbsp;</span>

 

To center the icon, you need to add an additional class of "fa-no-margin":

<p><span class="fa-no-margin fa fa-envelope-o fa-2x">&nbsp;</span>

Scroll to top

Tables

Tables should be used for displaying data (not laying out text and images - see Columns and Grids for that functionality). 

Standard Table (with Table Headers)

  DEGREE DIPLOMA
Tuition $37,800 $32,588
Fees $1,110 $1,110
Room and Board $17,372 $17,372
Health Insurance $2,134 $2,134
Total $65,260 $60,048

 

 

Compact Table

This table uses table class "data"

Graduate Programs in Valencia $41,100
Master of Music in Contemporary Performance (Global Jazz Concentration) in Boston $47,500

Master of Arts in Music Therapy
Low-residency, five-semester program

$28,500 Year 1 (3 semesters)
$19,000 Year 2 (2 semesters)

 

 

Data Table (With Table Headers)

This table uses the class "data" and tr class "altRow" to shade every other row, plus an anchored link for the asterisk:

  DEGREE DIPLOMA
Tuition $37,800* $32,588*
Fees $1,110 $1,110
Room and Board $17,372 $17,372
Health Insurance $2,134 $2,134
Total $65,260 $60,048

*This is a paragraph with the class "endnote".

 

 

Data Table with Filter/Sort

This table uses the class "datatable" which generates the sorting and filtering ability. Be sure that you have a  <thead>  to wrap the first row!

You can use the following parameters:

  • data-order-column - which column to sort by. The column numbers start at the far left with 0.
  • data-order-direction - asc for ascending order, desc for descending order
  • data-page-length - How many items to display per page
  • data-paging - Set to "false" to hide pagination controls and show all items
  • data-searching - Set to "false" to hide search control
  • data-show-info - Set to "false" to hide info display ("Showing..." on left side of footer)

In some cases (e.g. currency and date formats), alphabetical ordering does not work for the visible data in a column. In this case, add a 'data-order' attribute to every <td> data element in the column. When present, data-order attribute values are used for sorting instead of visible data.

FIRST NAME LAST NAME YEAR
Duke Ellington 1971
Arthur Fiedler 1972
Harry Ellis Dickson 1973
William "Count" Basie 1974
Tony Bennett 1974
Mabel Mercer 1975
George Wein 1976
Woody Herman 1977
Sarah Vaughan 1978
Lawrence Berk 1979
Teddy Wilson 1979
Buddy Rich 1980
John Williams 1980
John Hammond 1981
Billy Taylor 1981
John Dankworth 1982
Cleo Laine 1982
Quincy Jones '51 1983

 

 

Invisible Table

Boston Campus

Mailing Address
Berklee College of Music
1140 Boylston Street
Boston, MA 02215 USA

Phone: 617 266-1400

 

 

Valencia, Spain Campus

valencia.berklee.edu

Mailing Address
Berklee College of Music, Valencia, Spain Campus
Palau de les Arts Reina Sofia - Anexo Sur
Avenida Autopista del Saler, 1
46013 Valencia, Spain

Phone: +(34) 963 332 802

 

Conference table

 

Tuesday, October 24 WED THU

10:00 a.m.10:30 a.m.

TUE Wednesday, October 25 THU

10:00 a.m.–11:15 a.m.

 

TUE WED Thursday, October 26

9:00 a.m.–10:15 a.m.

Simple table

 

Berklee College of Music—Boston DEGREE DURATION
Contemporary Performance M.M. 1 year
Music Therapy M.A. 2 years

Scroll to top

Buttons and Links

Links:

This is how a link is styled when it appears in the content region of a page.

If your link is to a URL that does not live on our Drupal site, then it will automatically get a "new window" icon appended to it (as well as screen reader text for ADA compliance). 

Buttons:

Register

See the Content Manager's Guide for how to style a link as a button.

Scroll to top

 

Images

This is a caption. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Photo Credit: this is a credit

Caption:

  • color: #6c757d;
  • font-size: 90%;
  • margin-top: 1rem;

Credit:

  • font-family: Carrois Gothic,sans-serif;
  • font-size: 80%;

Image Styles

The display style for this image is "Inline". 

 

This image is set to "Display Style: Float Right"

credit: this guy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inde sermone vario sex illa a Dipylo stadia confecimus. Quo studio Aristophanem putamus aetatem in litteris duxisse? Tum ille timide vel potius verecunde: Facio, inquit. Duo Reges: constructio interrete. Illa argumenta propria videamus, cur omnia sint paria peccata. Et ille ridens: Video, inquit, quid agas; Idem iste, inquam, de voluptate quid sentit? Si enim ad populum me vocas, eum.


 

This image is set to "Display Style: Float Left".

credit: that guy

Terram, mihi crede, ea lanx et maria deprimet. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ut alios omittam, hunc appello, quem ille unum secutus est. Ac tamen hic mallet non dolere. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Nondum autem explanatum satis, erat, quid maxime natura vellet. Quod non faceret, si in voluptate summum bonum poneret. Quae in controversiam veniunt, de iis, si placet, disseramus.


 

 

This image is set to "Display Style: Thumbnail Right".

credit: don't use credits on thumbnails

Terram, mihi crede, ea lanx et maria deprimet. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ut alios omittam, hunc appello, quem ille unum secutus est. Ac tamen hic mallet non dolere. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Nondum autem explanatum satis, erat, quid maxime natura vellet. Quod non faceret, si in voluptate summum bonum poneret. Quae in controversiam veniunt, de iis, si placet, disseramus.


 

This image is set to "Display Style: Thumbnail Left".

credit: actually, don't use thumbnails

Terram, mihi crede, ea lanx et maria deprimet. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ut alios omittam, hunc appello, quem ille unum secutus est. Ac tamen hic mallet non dolere. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Nondum autem explanatum satis, erat, quid maxime natura vellet. Quod non faceret, si in voluptate summum bonum poneret. Quae in controversiam veniunt, de iis, si placet, disseramus.


 

Global Berklee Image Styles:

 

Homepage Hero Banners:

  • Description:For use on the top of a site section homepage
  • Examples: Berklee Global
  • Image ratio: 16:9 (but depends on if you have a tagline and/or CTA buttons)
  • Minimum suggested width: 2000px
  • Minimum suggested height: 1125px
  • Cropping behavior: Extra vertical space on the bottom is cropped.

Profile Headshot

  • Description: Floated right image, used in all the personas content type
  • Examples: Debbie
  • Image ratio:  4:5
  • Minimum width: 600px
  • Cropping behavior: The list view will crop the image to a 4:5 aspect ratio, around the set focal point.

Event & News Images (center column image)

  • Description: the main image for any event; is embedded on the page, and also in the event listing as the thumbnail
  • Examples: any event or news
  • Image ratio:  width is set to 480, but height is variable
  • Minimum width: 600px
  • Cropping behavior: The list view will crop the image to a 1:1 square aspect ratio, around the set focal point.

Scroll to top

 

Image Galleries

Slideshows

  • For News and Events, simply upload more than one image and they will automatically we wrapped into a slider.
  • For Basic Pages, right-click the image and type in "content-slider" or "content-slider-mini" in the "CSS classes" field to wrap the images. Or apply the "content slider" or "content slider mini" tag in the "Tags" area at the bottom of the editing tab.

See live example of a mini slider. 

See full-size slider below:

test
test
test
Maya Locke

Image Grids

Image grids are available when you need to arrange square or rectangular images into a series of rows and columns.

Block 1

test

Block 2

test

Block 3

test

Block 4

Maya Locke

[grid height="160px" columns="4" class="image-background"]

[gridblock title="Block 1"]

image goes here

[/gridblock]

[gridblock title="Block 2"]

image goes here

[/gridblock]

[gridblock title="Block 3"]

image goes here [/gridblock]

[gridblock title="Block 4"]

image goes here

[/gridblock]

[/grid]

Image Cards

Image cards will display text information over the image, with additional information below each one.

To show content below the image, you format it with div's that must be edited in the "source code" view.

Detail Info


In many cases, this should be no more than 150 characters.  Test your page for tablet display by viewing the screen at 480px wide screen resolution, and making sure the text is not cut off.

Detail Info


In many cases, this should be no more than 150 characters.  Test your page for tablet display by viewing the screen at 480px wide screen resolution, and making sure the text is not cut off.

Detail Info


In many cases, this should be no more than 150 characters.  Test your page for tablet display by viewing the screen at 480px wide screen resolution, and making sure the text is not cut off.

Detail Info


In many cases, this should be no more than 150 characters.  Test your page for tablet display by viewing the screen at 480px wide screen resolution, and making sure the text is not cut off.

[grid columns="2" height="150px" min-width="150px" class="image-background"]</p>
[gridblock title="Block 4" link="/node/NODE-ID" class="card"]
IMAGE GOES HERE
<div class="card-back">
<h3>Detail Info</h3>
<hr />
<p>Details</p>
</div>
[/gridblock]
[gridblock title="Block 4" link="/node/NODE-ID" class="card"]
IMAGE GOES HERE
<div class="card-back">
<h3>Detail Info</h3>
<hr />
<p>Details</p>
</div>
[/gridblock]
[/grid]

You can also use the grid short-code for laying out plain text. See more.

 

Scroll to top

Video

YouTube Embedded

Small player

You insert the caption in the quotes to have it appear here

[video url="http://www.youtube.com/watch?v=9lVrAu1Am-Y" size="300" caption="You insert the caption in the quotes to have it appear here"]

 

Alignment: The default is to align left, but you can also align right.

 

You insert the caption in the quotes to have it appear here

[video url="http://www.youtube.com/watch?v=9lVrAu1Am-Y" size="300" align="right" caption="You insert the caption in the quotes to have it appear here"]

 

Width: full or half, else the default is fixed, which is 350px, max 100%

 

You insert the caption in the quotes to have it appear here

[video url="http://www.youtube.com/watch?v=9lVrAu1Am-Y" size="300" align="left" width="half" caption="You insert the caption in the quotes to have it appear here"]

 

Media Card

Preview

Watch a 360-degree video of the Renaissance Youth Center's Music with a Message Band, recorded at Power Station at BerkleeNYC

 

[media-card url="https://www.youtube.com/watch?v=f9ng6nB_O34" eyebrow="Preview"] Watch a 360-degree video of the Renaissance Youth Center's Music with a Message Band, recorded at Power Station at BerkleeNYC [/media-card]

 

Link Blocks

 

[link-block title="Link Blocks"  link="/node/12345"]

IMAGE FIRST, THEN CONTENT
[/link-block]

Description: Floated left image
Examples: Undergraduate Programs
Image ratio:  1:1
Minimum suggested width: 330px
Minimum suggested height: 330px
Cropping behavior: The bottom starts to get cut off when the browser window is stretched beyond 1600px


Scroll to top

 

Callouts and Borders

Border Styles

To call attention to an important chunk of text, you can put a border around it.

The deadline for registering is April 10.

[callout]

The deadline for registering is April 10.

[/callout]

 

Blockquotes

You can use the "quote" tool in the editing toolbar, or you can use this short-code if you want a designed attribution.

This is the quoted text.

— A Famous Book, by Joe Author

[blockquote cite="A Famous Book" author="Joe Author"]

This is the quoted text.

[/blockquote]

 

Aside Block Styles

Used to call out some information that provides additional context to the main body text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat.

[aside title="Announcement" width="half" align="right"]

Berklee has partnered with Wix, a website building platform, to provide exclusive templates, discounts, training, and support so you can create a professional website.

[/aside]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat.

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

[aside title="Announcement" width="full"]

Berklee has partnered with Wix, a website building platform, to provide exclusive templates, discounts, training, and support so you can create a professional website.

[/aside]

 

Scroll to top

Columns and Grids

The grid short-code is great for laying out images with text, in a responsive grid. See more.

You can use the grid short-code for just text (no images). Adding a class called "callout" puts a thin border around each gridbox.

Content goes here.

Content goes here.

Content goes here.

[grid height="150px" columns="r3" class="callout"]

[gridblock]

Content goes here.

[/gridblock]

[gridblock]

Content goes here.

[/gridblock]

[gridblock]

Content goes here.

[/gridblock]

[/grid]

Columns

Two-column Page

I am being constructed using shortcodes and Bootstrap CSS!:

I am being constructed using shortcodes and Bootstrap CSS!:

[column-one-half]

    Content for Column One.

[/column-one-half]

[column-one-half-last]

    Content for Column Two.

[/column-one-half-last]

 

Three-column Page

I am being constructed using shortcodes and Bootstrap CSS!

I am being constructed using shortcodes and Bootstrap CSS!

I am being constructed using shortcodes and Bootstrap CSS!

 

[column-one-third]

    Content for Column One.

[/column-one-third]

[column-one-third]

    Content for Column Two.

[/column-one-third]

[column-one-third-last]

    Content for Column Three.

[/column-one-third-last]

 

Scroll to top

Misc. Content Elements

Clear

Use this if you want content to NOT wrap around your floated elements. This starts the content on its own new line. You can add a border as well.

This is a standalone section.

[clear border="yes"]

This is a standalone section.

 

Expandables

[expandable title="expand me" expanded="yes" color="fire-brick"]
    text to show/hide goes here
[/expandable]

 

Responsive embeds

<p class="embed-container"><iframe allowfullscreen="" src="//e.issuu.com/embed.html#37700276/69242364" style="border:none;width:100%;height:auto;"></iframe></p>

 

Scroll to top

 

Campus Cross-Reference Styles

Berklee.edu is the launch point for all portals deeper into the Berklee Universe. Many pages exist on Berklee.edu that actually refer to information better expressed on a different campus site. Campus cross-reference styles exist for this reason. Use a campus cross-reference style when you need to send a user to a different Berklee site, alert them that they are reading information about a different Berklee campus, or both.

It can be used in a call-out style:

For information about the Valencia campus, visit the Berklee Valencia site. 

<div class="campus-xref">For information about the Valencia campus, visit the <a href="http://valencia.berklee.edu/faqs-spring-2021/" target="_blank">Berklee Valencia</a> site.&nbsp;</div>

For information about the Valencia campus, visit the Berklee Valencia site. 

<div class="campus-xref">For information about the Valencia campus, visit the <a class="internal-berklee-link" href="http://valencia.berklee.edu/faqs-spring-2021/" target="_blank">Berklee Valencia</a> site.&nbsp;</div>

 

It can also be used on simple links:

 

Read more on Berklee's Valencia, Spain campus site.

<a href="http://valencia.berklee.edu" class="campus-xref">Read more on Berklee's Valencia, Spain campus site</a>

 

Scroll to top