Web Standards Style Guide

Brand Colors
Typography
Icons
Tables
Buttons and Links
Images
Image Galleries
Video
Media Card
Linkblock
Callouts and Borders
Columns and Grids
Misc. Content Elements
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.

This
Is
A
Numbered
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:

(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"

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

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

view source code

<table>

<tbody>

<tr>

<th>DEGREE</th>

<th>DIPLOMA</th>

</tr>

<tr>

<td>Tuition</td>

</tr>

<tr>

</tr>

<tr>

<td>Room and Board</td>

</tr>

<tr>

<td>Health Insurance</td>

</tr>

<tr>

<td><strong>Total</strong></td>

</tr>

</tbody>

</table>

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)

view source code

<table class="data">
<tbody>
<tr>
<td>Graduate Programs in <a href="/node/2537411">Valencia</a></td>
<td>$41,100</td>
</tr>
<tr>
<td>Master of Music in Contemporary Performance (Global Jazz Concentration) in Boston</td>
<td>$47,500</td>
</tr>
<tr>
<td rowspan="2">
<p>Master of Arts in Music Therapy<br />
<em>Low-residency, five-semester program</em></p>
</td>
<td>$28,500 Year 1 (3 semesters)</td>
</tr>
<tr>
<td>$19,000 Year 2 (2 semesters)</td>
</tr>
</tbody>
</table>

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".

view source code

<tbody>

<tr>

<th>DEGREE</th>

<th>DIPLOMA</th>

</tr>

<tr>

<td>Tuition</td>

</tr>

</tr>

<tr>

<td>Room and Board</td>

</tr>

<td>Health Insurance</td>

</tr>

<tr>

<td><strong>Total</strong></td>

</tr>

</tbody>

</table>

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

view source code

<thead>

<tr>

<th style="cursor: pointer">First name</th>

</tr>

</thead>

<tbody>

<tr>

<td>Ellington</td>

</tr>

<tr>

<td>Arthur</td>

<td>Fiedler</td>

</tr>

<tr>

<td>Harry Ellis</td>

<td>Dickson</td>

</tr>

<tr>

<td>William "Count"</td>

<td>Basie</td>

</tr>

<tr>

<td>Bennett</td>

</tr>

<tr>

<td>Mabel</td>

<td>Mercer</td>

</tr>

<tr>

<td>George</td>

</tr>

<tr>

<td>Woody</td>

<td>Herman</td>

</tr>

<tr>

<td>Sarah</td>

<td>Vaughan</td>

</tr>

<tr>

<td>Lawrence</td>

</tr>

<tr>

<td>Teddy</td>

<td>Wilson</td>

</tr>

<tr>

<td>Buddy</td>

</tr>

<tr>

<td>Williams</td>

</tr>

<tr>

<td>Hammond</td>

</tr>

<tr>

<td>Billy</td>

<td>Taylor</td>

</tr>

<tr>

<td>Dankworth</td>

</tr>

<tr>

<td>Laine</td>

</tr>

<tr>

<td>Quincy</td>

<td>Jones '51</td>

</tr>

</tbody>

</table>

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

view source code

<tbody>

<tr>

<h2>Boston Campus</h2>

<p><strong>Mailing Address</strong><br />

Berklee College of Music<br />

1140 Boylston Street<br />

Boston, MA 02215 USA</p>

<p>Phone: 617 266-1400</p>

</td>

<h2>Valencia, Spain Campus</h2>

<p><a href="http://valencia.berklee.edu/?pid=201400109" target="_blank">valencia.berklee.edu</a></p>

<p><strong>Mailing Address</strong><br />

Berklee College of Music, Valencia, Spain Campus<br />

Palau de les Arts Reina Sofia - Anexo Sur<br />

Avenida Autopista del Saler, 1<br />

46013 Valencia, Spain</p>

<p>Phone: +(34) 963 332 802</p>

</td>

</tr>

</tbody>

</table>

Conference table

Tuesday, October 24	WED	THU
TUE	Wednesday, October 25	THU
TUE	WED	Thursday, October 26
10:00 a.m.10:30 a.m. Session 1: Opening Remarks by Berklee's Campus in Valencia, Spain Presenters: María Iturriaga—Executive Director, Berklee's Valencia Campus Jorge Rostoll—Senior Director of Operations, Berklee's Valencia Campus Location: Main Hall María Iturriaga and Jorge Rostoll welcome Berklee partners to Valencia, Spain. This session will feature the celebration of the five-year anniversary of the Berklee campus in Spain.
10:00 a.m.–11:15 a.m. Session 7: Creative Educational Models for Recruitment: Berklee on the Road and More Presenters: Amanda Gouldthorpe—Assistant Director of Global Operations, Berklee Location: Sala Polivalente This session will focus on the concept of Berklee’s “On The Road” program model as a powerful tool for recruitment, engagement, branding, and relationship building. By sharing past and existing program models and engaging in active discussion around future possibilities, this session seeks to demonstrate ways partners can consider developing and implementing their own customized programs. Session 8: Old Friends, New Partners: Introducing Boston Conservatory at Berklee Presenters: Kim Haack—Deputy Chief of Staff, Boston Conservatory at Berklee Brian Calhoon—Director of Admissions, Boston Conservatory at Berklee Location: Sala CAE 4 This session will introduce Boston Conservatory at Berklee to the partners in an info session format with Q&A. The session will feature Kim Haack, formerly director of external relations (now deputy chief of staff) for the Boston Conservatory at Berklee, and Brian Calhoon, director of Admissions at Boston Conservatory at Berklee.
9:00 a.m.–10:15 a.m. Session 14: Educational Pathways to Berklee: Credit Transfer Moderator: Jason Camelio—Director - Global Initiatives, Berklee Presenters: Camille Colatosti—Dean, Institutional Research and Assessment/Graduate Studies, Berklee Jeffrey Kinnamon—Registrar, Berklee Mary McClory—Academic Affairs Project Manager, Berklee Location: Main Hall Moderated by Jason Camelio, this session will explore updates to credit transfer agreements, the faculty development series, issues with transfers and incoming students, new curricular developments, and seamless collaborations between our institutions.

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:

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

Scroll to top

Images

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"

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".

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".

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

Scroll to top

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:

Using Grid and Gridblock

The Grid and Gridblock shortcodes can be used to arrange square or rectangular images into a series of rows and columns. In the simplest form, grid and gridblock merely partition the page. Any HTML or other shortcodes inside the gridblock are displayed within the grid "cell". Here's an example that uses a responsive four-column layout:

Block 1

Block 2

Block 3

Block 4

[grid columns="r4"]

[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 Link Boxes

The grid and gridblock short-codes can also be used to display images that act as links, with optional overlaid titles. In this mode, grid has a number of options, including "height" (which limits the height of the images) and "class" (which alters the style). Any other HTML or shortcodes within the gridblock shortcode are rendered below the image. In this example, some HTML inside a "card-back" div is rendered below the image (to do this, it is necessary to edit the text in "Source" mode).

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="r2" height="200px" class="text-align-bottom"]

[gridblock title="Block 1" link="/node/NODE-ID"]

IMAGE GOES HERE

<h3>Detail Info</h3>

<hr />

<p>In many cases, ...</p>

</div>

[/gridblock]

[gridblock title="Block 2" link="/node/NODE-ID"]

IMAGE GOES HERE

<h3>Detail Info</h3>

<hr />

<p>In many cases, ...</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

This is a link block. Link blocks are generally found on Portal Pages. Link blocks give a high-level introduction to the first program, department, or other site section that is launched from this portal. The max is 6 lines of text.

[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]

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.

[grid 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!:

[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!

[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

Click to expand me:-)

You can toggle content to hide/show with this expandable shortcode.

This lets users scan a set of headers easily, to find the content that is relevant to them.

It is not recommended to use exandables if there will be only one or two.
It is not recommended to use expandables if the content you are hiding is longer than the height of a typical browser window.

I am set to be auto-expanded

You can auto-expand by adding "expanded="yes" within the brackets.

expand me!

color="fire-brick"
color="squash"
color="sea-green"
color="beach-blue"
color="prince-purple"

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

Responsive embeds

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="/node/2537411" target="_blank">Berklee Valencia</a> site. </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="/node/2537411" target="_blank">Berklee Valencia</a> site. </div>

It can also be used on simple links:

<a href="/node/2537411" class="campus-xref">Read more on Berklee's Valencia, Spain campus site</a>

Scroll to top

Brand Colors

Typography

Font Family

Headers

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

Formatting

Icons

Tables

Standard Table (with Table Headers)

view source code

Compact Table

view source code

Data Table (With Table Headers)

view source code

Data Table with Filter/Sort

view source code

Invisible Table

Boston Campus

Valencia, Spain Campus

view source code

Conference table

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

Session 1:Opening Remarks by Berklee's Campus in Valencia, Spain

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

Session 7:Creative Educational Models for Recruitment: Berklee on the Road and More

Session 8:Old Friends, New Partners: Introducing Boston Conservatory at Berklee

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

Session 14:Educational Pathways to Berklee: Credit Transfer

Simple table

Buttons and Links

Links:

Buttons:

Images

Caption:

Credit:

Image Styles

Global Berklee Image Styles:

Homepage Hero Banners:

Profile Headshot

Event & News Images (center column image)

Image Galleries

Slideshows

Using Grid and Gridblock

Block 1

Block 2

Block 3

Block 4

Image Link Boxes

Detail Info

Detail Info

Detail Info

Detail Info

Video

YouTube Embedded

Media Card

Link Blocks

Link Blocks

Callouts and Borders

Border Styles

Blockquotes

Aside Block Styles

Columns and Grids

Columns

Three-column Page

Misc. Content Elements

Clear

Expandables

Click to expand me:-)

I am set to be auto-expanded

expand me!

Responsive embeds

Campus Cross-Reference Styles

Session 1:
Opening Remarks by Berklee's Campus in Valencia, Spain

Session 7:
Creative Educational Models for Recruitment: Berklee on the Road and More

Session 8:
Old Friends, New Partners: Introducing Boston Conservatory at Berklee

Session 14:
Educational Pathways to Berklee: Credit Transfer