Optional HTML classes

On this page:

There are optional HTML classes that will change some of the default heading, paragraph, table, and unordered list styling in Berkeley Web Builder. You will need to make edits directly in the HTML source to use these classes. 

List of HTML classes

The following classes can be used with heading text, paragraph text, tables, and lists:

  • bwb-heading-mini: "small caps" heading display (all heading levels)
  • bwb-colorband-*: "color band" heading display with Berkeley Brand colors (heading 2 only)
  • bwb-list-brand-*: dot list display in Berkeley Brand colors (unordered lists only)
  • bwb-list-horizontal-dot-*: horizontal dot list display in Berkeley Brand colors (unordered lists only)
  • bwb-list-horizontal-line-*: horizontal line list display in Berkeley Brand colors (unordered lists only)
  • bwb-bolder and bwb-boldest: increased font weights for the strong tag on paragraph text
  • bwb-para-lead: "lead" paragraph display with larger font size
  • bwb-para-alert-info and bwb-para-alert-warning: "alert" displays for paragraph text with Berkeley Brand colors
  • bwb-quote-*: Berkeley Brand colors for blockquote tag

See below for examples of these classes and instructions on how to use.

Back to list

Heading classes

These optional heading classes provide some variations on the default styles of heading text. The bwb-heading-mini class can be used on all levels of heading text (headings 2 through 6), and the bwb-colorband-* classes can only be used on heading 2 text. 

How to add a heading class:

Add the heading text via the WYSIWYG toolbar, and then select the HTML source button. Locate the heading text and add one of the classes in the following format, preceded by class=:

<h3 class="bwb-heading-mini">Heading 3 text with "small caps" (mini) class<h3>

<h2 class="bwb-colorband-berkeley-blue">Heading 2 text with Berkeley Blue color band class<h2>

The following Berkeley Brand colors are available for the color band heading classes:

  • bwb-colorband-berkeley-blue
  • bwb-colorband-blue-medium
  • bwb-colorband-rose-dark
  • bwb-colorband-purple-dark
  • bwb-colorband-green-dark
  • bwb-colorband-purple-dark

Examples: heading classes

See Figures 1 and 2 for examples of the bwb-heading-mini and bwb-colorband-berkeley-blue heading classes on a Basic page, and see Figure 3 for an example of the HTML source of a Basic page using a color band heading class.

Figure 1: Heading text using "small caps" (mini) HTML class
Screenshot of a Basic page with heading 2 and paragraph text and heading 3 text with the small caps class
Figure 2: Heading 2 with Berkeley Blue "color band" class
Screenshot of a Basic page with paragraph text and a heading 2 with the Berkeley Blue color band class
Figure 3: HTML source of a Basic page with a "color band" class added to the heading 2 tag
Screenshot of the HTML source view of a Basic page with the heading 2 tag and HTML class highlighted

Back to list

Paragraph classes

These optional paragraph classes provide some variations on the default styles of paragraph text. The bwb-para-lead class provides a larger font size for paragraph text, which you are encouraged to use for paragraph text that should not be a heading for accessibility best practices but should still look larger and more prominent than standard paragraph text. The bwb-para-alert-info class displays a block of Blue Light background color and the bwb-para-alert-warning class displays a block of Gold Light background color order to provide an alert-style notice on paragraph text.

How to add a paragraph class:

Add the paragraph via the WYSIWYG toolbar, and then select the HTML source button. Locate the paragraph text and add one of the classes in the following format, preceded by class=:

<p class="bwb-para-lead">Paragraph text with the "lead" style class</p>

<p class="bwb-para-alert-info">Paragraph text with the "info" alert style class</p>

<p class="bwb-para-alert-warning">Paragraph text with the "warning" alert style class</p>

Examples: paragraph classes

See Figure 4 for an example of the bwb-para-lead paragraph class on a Basic page, and see Figures 5 and 6 for examples of the bwb-para-alert-info and bwb-para-alert-warning paragraph classes on a Basic page. See Figure 7 for an example of the HTML source of a Basic page using the lead paragraph class.

Figure 4: Paragraph text with "lead" class
Screenshot of a basic page with the lead paragraph style with larger font highlighted under page title
Figure 5: Paragraph text with Blue Light "info" alert class
Screenshot of a basic page with the blue alert paragraph text highlighted
Figure 6: Paragraph text with Gold Light "warning" alert class
Screenshot of a basic page with the gold alert paragraph text highlighted
Figure 7: HTML source of a Basic page with the "lead" class added to a paragraph tag
Screenshot of the HTML source of a Basic page with a paragraph tag with paragraph class highlighted

Back to list

Unordered list classes

These optional list classes provide some variations on the default styles of unordered lists. The bwb-list-brand-* class provides larger dots for the list bullets. The bwb-list-horizontal-dot-* class displays a horizontal list with larger dots for the list bullets and the bwb-list-horizontal-line-* class displays a horizontal list with rounded vertical lines for the list bullets. All of the optional list classes use the Gray Medium, Blue Medium, and California Gold from the Berkeley Brand set of colors.

How to add an unordered list class:

Add the unordered list via the WYSIWYG toolbar, and then select the HTML source button. Locate the list and add one of the classes in the following format, preceded by class=:

<ul class="bwb-list-brand-california-gold">

<ul class="bwb-list-horizontal-dot">

<ul class="bwb-list-horizontal-line-blue-medium">

The following Berkeley Brand colors are available as follows for the list heading classes:

  • bwb-list-brand (Gray Medium)
  • bwb-list-brand-california-gold
  • bwb-list-brand-blue-medium
  • bwb-list-horizontal-dot (Gray Medium)
  • bwb-list-horizontal-dot-california-gold
  • bwb-list-horizontal-dot-blue-medium
  • bwb-list-horizontal-line (Gray Medium)
  • bwb-list-horizontal-line-california-gold
  • bwb-list-horizontal-line-blue-medium

Examples: unordered list classes

See Figure 8 for an example of the bwb-list-brand-california-gold unordered list class, Figure 9 for an example of the bwb-list-horizontal-dot unordered list class, and Figure 10 for an example of the bwb-list-horizontal-line-blue-medium unordered list class. See Figure 11 for an example of the HTML source of a Basic page using an unordered list class.

Figure 8: Unordered list with California Gold "brand" style
Screenshot of a basic page with an unordered list using the california gold brand class
Figure 9: Unordered list with Gray Medium horizontal "dot" style
Screenshot of a basic page with a horizontal unordered list with gray dots highlighted
Figure 10: Unordered list with Blue Medium horizontal "line" style
Screenshot of a basic page with a horizontal list with blue medium lines highlighted
Figure 11: HTML source of a Basic page with the California Gold "brand" class added to an unordered list tag
Screenshot of the HTML source of a basic page with the unordered list tag with class highlighted

Back to list

Table classes

More coming soon

Back to list