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. Blocks and Borders
  10. Columns and Grids
  11. Misc. Content Elements
  12. Campus Cross-Reference Styles

 

Brand Colors


 

Light Gray  Light Gray Looks Like This
#eee;
Dark Gray Dark Gray Looks Like This
rgb(76, 89, 96);
Off-Black Off-Black Looks Like This
rgb(37,53,60);
Berklee Red Berklee Red Looks Like This
#d81118
Fire Brick Fire Brick Looks Like this
rgb(165,32,71);
Squash Squash Looks Like This
rgb(238,134,45);
Sea Green Sea Green Looks Like This
rgb(22,172,150);
Beach Blue Beach Blue Looks Like This
rgb(7, 139, 170);
Prince Purple Prince Purple Looks Like This
rgb(89,91,154);

Scroll to top

 

Typography


 

  • Font Family

    Berklee.edu uses Open Sans for all body text. If a font in the stack is not available, the font defaults to Arial, Helvetica, and sans-serif in that order.

    font-family: "open sans", Arial, Helvetica, sans-serif;
  • Font Color

    Body text:

    rgb(80, 83, 75)

    Link text:

    #d81118

    Headers:

    rgb(80, 83, 75)

    Captions:

    #5a5a5a

    Image Credits:

    #888
  • Font Weight

    100 for page titles and sidebar headlines

    400 for regular text

    600 for bold text and regular headers

 

This is an H1.

h1 tags require an ID of #page-title. Regular h1 tags are not used on Berklee.edu

<h1 id="page-title">Headline Goes Here.</h1>

 

This is an H2

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

<h2>Headline Goes Here.</h2>

 

This is an H3

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

<h3>Headline Goes Here.</h3>

 

Berklee.edu does not use H4-H6 tags. Use bold text to distinguish low-level headers from content text.

<p><strong>Bold Text Goes Here</strong></p>

 

This is a regular paragraph. Paragraphs can include bolditalicunderlined, or strikethrough text.

<p>This is a regular paragraph. Paragraphs can include <strong>bold</strong>, <em>italic</em>, <u>underlined</u>, or <strike>strikethrough</strike> text.</p>

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

Intendation of 40px.

Indentation of 80px.

Indentation of 120px.

<p>Paragraph text may be indented in increments of 40px up to 120px.</p>
<p class="indent-40">Intendation of 40px.</p>
<p class="indent-80">Indentation of 80px.</p>
<p class="indent-120">Indentation of 120px.</p>

 

    This is a long blockquote. Blockquotes have extra margin and padding. The font size of your quote will change automatically depending on how many words are in the blockquote. Short quotes will display large text, long quotes will have smaller text.

    This is a short blockquote with an annotation.

    -This is an attribution

    This is a short blockquote with a specially-formatted annotation.

    -This is an attribution with a title that needs to be un-italicized.

     

    <blockquote>
    <p>This is a blockquote.</p>
    <p><span class="attribution">-This is an attribution<span class="book-title">with unitalicized text</span></span></p>
    </blockquote>

     

    This is a half blockquote.

    Half blockquotes float to the left, with text wrapping around. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Donec sollicitudin molestie malesuada.

    <blockquote class="half">This is a halfblockquote</blockquote>
     
     
    1. This
    2. Is
    3. A
    4. Numbered
    5. List
      1. First Child
      2. First Child
        1. Second Child
        2. Second Child
    <ol>
        <li>This</li>
        <li>Is</li>
        <li>A</li>
        <li>Numbered</li>
        <li>List</li>
        <ol>
            <li>First Child</li>       
            <li>First Child</li>
               <ol>
                  <li>Second Child</li>
                 <li>Second Child</il>
              </ol>
        </ol>
    </ol>
     

     

    • This
    • Is
    • An
    • Unordered
    • List
      • First Child
      • First Child
        • Second Child
        • Second Child
    <ul>
        <li>This</li>
        <li>Is</li>
        <li>An</li>
        <li>Unordered</li>
        <li>List</li>
            <ul>
                <li>First Child</li>
                <li>First Child</li>
                    <ul>
                        <li>Second Child</li>
                        <li>Second Child</li>
                    </ul>
            </ul>
    </ul>
     

     

    Scroll to top

     

    Icons


    [Internal note: These are the only two icons specified in the original style guide. There are many more icon classes defined in the SASS. Should we list all of them?]

     

    Paragraph Icons:

    This is a paragraph with the class="save-the-date" (appends a calendar icon)

    <p class="save-the-date">Text Here</p>

     

    This is a paragraph with the class="globe" (appends a globe icon)  

    <p class="globe">Text Here</p>

     

    This is a link to a PDF or other downloadable document. 

    <a href="path/to/file.pdf">Text Here</a>

    This is an external link.

    <a href="http://www.google.com">Text Here</a>

     

    Image Icons:

    <img align="middle" alt="" border="0" height="25" src="/sites/default/files/images/BPC/wheelchair-accessible.jpg" width="25" data-pin-nopin="true">

     

    Call-to-action Icons:

    applied to blocks only; uses the class: next-steps global


    Social Icons:

    [Internal note: How can I show these icons on the page without using an image? Style tags are getting stripped out, and the CSS is not set to target social classes inside this region.]

    Berklee.edu uses a set of custom social media icons, as well as FontAwesome icons.

    Large Icons:
    Seen in the footer of Berklee.edu.

    FontAwesome Icons:
    Example: William Davis Room.

    Facebook   
    <iclass="fa fa-facebook"aria-hidden="true" ></i>
    Twitter  
    <iclass="fa fa-twitter"aria-hidden="true" ></i>
    Instagram  
    <iclass="fa fa-instagram"aria-hidden="true" ></i>
    Snapchat  
    <iclass="fa fa-snapchat"aria-hidden="true" ></i>

    Colorful Icons:

    Berklee Red 
    <iclass="fa fa-heart red"aria-hidden="true"> </i>
    Beach Blue
    <iclass="fa fa-heart blue"aria-hidden="true"> </i>
    Sea Green
    <iclass="fa fa-heart green"aria-hidden="true"> </i>
    Squash
    <iclass="fa fa-heart yellow"aria-hidden="true"> </i>
    Firebrick
    <iclass="fa fa-heart brick"aria-hidden="true"> </i>
    Prince Purple
    <iclass="fa fa-heart purple"aria-hidden="true"> </i>

    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


    [Internal note: should we include link styles for menus? transparent buttons like on the homepage?]

     

    Links:

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

    <a href="#">This is how a link is styled</a>

     

    Regular Buttons:

    default buttons expand to 100% the width of their containers

    <p><a class="button" href="#">default buttons expand to 100% the width of their containers</a></p>

     

    This is a smaller button.

    Smaller buttons are as wide as the text inside them.

    <p><a class="button inline" href="#">This is a smaller button</a></p>

     

    They can appear inline or on a new line.

    <p>They can appear <a class="button inline" href="#">inline</a> or on a new line</p>

     

    Scroll to top

     

    Images


     

    • Focal Point Standards

      All Berklee images are uploaded to our site with a unique focal point specified. The focal point rule ensures that import parts of the image (such as a face or a sign) are not cut off as the image is responding to the browser size. To see an example of this feature in action, please visit https://www.berklee.edu/focal_point/preview/215976/17%2C40 and note that the focal point has been set to the center of the guitar.

    WYSIWYG Styles:

    These image styles are available to editors from inside the Drupal WYSIWYG editor.

    Thumbnail:

    Preview:

    Medium:

    Large:

    Caption Styles:

    You have the option to add a credit or a caption to your images.

    Lightbox Images:

    Images can be displayed on the page at thumbnail or small sizes, but expand in a lightbox overlay when clicked.

    text on hover

    Floating/Wrapping Styles:

    You may select a display style that floats to the left or right and wraps around text. Floating images create a newspaper-like layout. 

    This image is set to "Display Style: Float Right" It also has a caption and credit.

    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck
    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck

    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". It also has a caption and credit.

    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck
    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck

    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". It also has a caption and credit. Notice how the text wraps around the bottom of the image.

    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck
    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck

    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". It also has a caption and credit. Notice how the text wraps around the bottom of the image.

    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck
    Born to Wander (from the left): Eric Applegate ’89, Kate Skinner, and Steve Kovalcheck

    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:

    These image styles are used across the Berklee.edu site, and may not be available or easily accessible to content edtiors.

    Homepage/Hybrid Homepage Banners:

    Description:For use on the top of our homepage hybrid homepages
    Examples: /ice
    Image ratio: 14:8
    Minimum suggested width: 1400px
    Minimum suggested height: 800px
    Cropping behavior: Extra vertical space on the bottom is cropped.

     

    Lead Page (large, tall version for landing page):

    Description: Banner for top of site section home pages
    Examples: /mmi
    Image ratio: 4:1
    File size: Must be under 150kb
    Minimum suggested width: 1500px
    Minimum suggested height: 375px
    Cropping behavior: Extra vertical space on the bottom is cropped.

    Lead Page (compact version for internal page):

    Description: The thinner header for internal pages of site sections
    Examples: https://www.berklee.edu/latino/informacion
    Image ratio: 15:2
    File size: Must be under 50kb
    Minimum suggested width: 1500px
    Minimum suggested height: 200px
    Cropping behavior: The bottom of the image gets cropped.

    Full Width Banner:

    Description: Department page content banner
    Examples: Composition Department
    Image ratio:  nothing enforced, but 1:3 is optimal
    Minimum suggested width: 670px but 1300px width is best for desktop.
    Optimal suggested height: 228px
    Cropping behavior: None

    Persona image:

    Description: Floated right image, used in all the personas content type
    Examples: Tali Rubinstein
    Image ratio:  1:1
    Suggested width: 1000px / Minimum width: 400px
    Suggested height: 1000px / Minimum height: 400px
    Cropping behavior: The images are constrained by width in the list view (e.g. berklee.edu/faculty). The minimum is based on the tablet view.

    Homepage Stripes:

    Description: News, events, and hero images
    Examples: Home page
    Image ratio:  14:9
    Suggested width: 1400px / Minimum width: 800px
    Suggested height: 900px / Minimum height: 514px
    Cropping behavior: The images need to be consistent or they display with different heights on the home page.

    Event & News Images (center column image)

    Description: the center column image for any event; is embedded on the page, and also in the event listing as the thumbnail
    Examples: any event or news (where the checkbox to “hide images” is unchecked)
    Image ratio:  1:1 (square)
    Minimum width: 400px
    Minimum height: variable
    Cropping behavior: square thumbnail in the event view

    Tutorial Thumbnails

    Description: The images that display next to each step of an individual tutorial
    Examples: /tutorial/webex-training-center-links-and-recordings
    Image ratio:  any
    Minimum suggested width: less than 2mb
    Minimum suggested height: less than 2mb
    Cropping behavior: none

    Tutorial thumbnail icons

    Description: The images display in the list view of tutorials
    Examples: /fts/tutorials
    Image ratio:  1:1
    Minimum suggested width: 120-250px
    Minimum suggested height: 120-250px

     

    Scroll to top

     

    Image Galleries


     

    • Image Specs:
      Images must be at least 480px wide
      The aspect ratio that works best for a 2-column layout is 12:5 (e.g. 480px by 200px)
    • Parameters:
      columns = number between 1 and 4
      height = pixel height for images (150px is suggested)
      min-width = pixel width for images (200px is suggested)
    • Classes:
      align-center: If you make these images links, apply the "align-center" class to the link
      image-background: If you apply the class "image-background" to the grid, it takes an image placed inside the class and places it as a slightly darkened background image with white text. The image will have a lightened hover state.
      card: If you apply the class "card" to the gridblock, it will display whatever text follows on hover
       

    Image Grids

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

    Block 1

    Block 2

     

    Block 3

    Block 4

    Berklee City Music Mentoring Program

    [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 on a hover event.

    Block 1

    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.

    Block 2

    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.

    Block 3

    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.

    Block 4

    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]

     

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

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

    Large player

     

    Custom Embedded

    If you use your own method of embedding video, make sure that the control sprites are the same as the ones on Berklee.edu. Berklee uses a selection of FontAwesome sprites:

    Play   <i class="fa fa-play">&nbsp;</i>
    Pause   <i class="fa fa-pause">&nbsp;</i>
    Fast Forward or Skip   <i class="fa fa-fast-forward>&nbsp;</i>
    Rewind or Previous   <i class="fa fa-fast-backward">&nbsp;</i>
    Muted   <i class="fa fa-volume-off">&nbsp;</i>
    Unmuted   <i class="fa fa-volume-up">&nbsp;</i>

    Scroll to top

    Blocks and Borders


     

    Border Styles

    Border styles can be useful for calling attention to an important chunk of text.

    • This is a bordered call out block.

    <ul id="callout">

        <li>This creates one bordered call out block.</li>

        <li>This creates another bordered call out block.</li>

    </ul>

     

     

    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.

    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="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]

    Block Styles

    Blocks have set heights to create a grid effect. Because these heights are fixed, these blocks will not scale to fit the content overflow on small screens. Blocks should only be used to display small amounts of text or images.

    This is a box-shadow call out block.

    [grid height="100px" columns=1]
    [gridblock]This is a box-shadow call out block.[/gridblock]
    [/grid]
    You can also use the call out block style to create grids of 2 or more blocks. 
    This is a 2 Column box-shadow call out block grid.
    [grid height="100px" columns=2]
    [gridblock]This is column 1.[/gridblock]
    [gridblock]This is column 2.[/gridblock]
    [/grid]
     
    This is a 3 Column box-shadow call out block grid.
    This is a 3 Column box-shadow call out block grid.
    This is a 3 Column box-shadow call out block grid.
    [grid height="100px" columns=3]
    [gridblock]This is column 1.[/gridblock]
    [gridblock]This is column 2.[/gridblock]
    [gridblock]This is column 3[/gridblock]
    [/grid]

    Scroll to top

     

     

    Columns and Grids


     

    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

    This is Milo, the cat.
    Milo, the cutest.

    I am being constructed using shortcodes and Bootstrap CSS!

    This is Milo, the cat.
    Milo, the cutest.

    I am being constructed using shortcodes and Bootstrap CSS!

    This is Milo, the cat.
    Milo, the cutest.

    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


     

    Link Blocks

    [link-block title="Link Blocks"  link="/node/NODE-ID"]
    IMAGE FIRST, THEN CONTENT
    [/link-block]

    Description: Floated left image
    Examples: Service catalog, 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

    Expandable Toggle

    [ expandable title="expand me" ]
        text to show/hide goes here
    [ /expandable ]

     

    Slider

    [view name="news_featured_news" display="block"]

    Description: The images that fill in the sliders at the top of the news/events page(s)
    Examples: /news and /events
    Image ratio:  2:1
    Minimum suggested width: 700px
    Minimum suggested height: 350px, see below
    Cropping behavior: The bottom of the image gets cropped

    Read more/read less

    This will truncate the text at 200 characters.

    <div class="moreable"></div>

    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.

    Berklee.edu uses the branding palette color Beach Blue and the secondary font Avenir as a flag meaning "Other Berklee Campuses".

    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>

     

    Blocks:

    This page contains information about Berklee's Valencia, Spain campus. Read more on the Valencia campus site
    <div class="campus-xref full">This page contains information about Berklee's Valencia, Spain campus. Read more on the <a href="http://valencia.berklee.edu">Valencia campus site</a></div>
    This page contains information about Berklee's Valencia, Spain campus. Read more on the Valencia campus site. Or link to an internal page.
    <div class="campus-xref half">This page contains information about Berklee's Valencia, Spain campus. Read more on the <a href="http://valencia.berklee.edu">Valencia campus site</a>Or link to <a class="internal-berklee-link" href="berklee.edu">an internal page.</a></div>

     

    Link-Blocks:

    [link-block title="Berklee Online" link="/node/id" type="campus-xref"] [INSERT YOUR IMAGE HERE] Access to Berklee's acclaimed curriculum from anywhere in the world

    • Undergraduate and graduate degree programs
    • Certificate programs
    • Individual courses

    [/link-block]

     

    Buttons:

    Valencia Orientation Info

    <a href="http://valencia.berklee.edu" class="button campus-xref">Valencia Orientation Info</a>

     

    Scroll to top