Office of Commercialization > Style Guide

Style Guide

Adding a Basic Section

All paragraph content should be used in a sidebar Right. Add white to the section class to achieve the white background and left margin.

Adding a Red Callout Section

Drop Down

The drop down menu is used to condense the information on the page. To create it, use the SINGLE page builder section, and add the section classes of white and show-hide. Also add the title of the page in the Section Title line. Remember to adhust the H tag level.

In the settings of the column 1 of 1 section, add the class of flex-wrap

To create the gird, follow the format below:

<div class="grid">
<h4> - Title Goes Here - </h4>
<div class="flex-sub">
<div class="sub-content">
<div class="flex-img"> - image goes here - </div>
<div class="flex-contact">
<ul>
<li class="phone"> - phone number here - </li>
<li class="email"> - link to email - </li>
<li class="website"> - link to website - </li>
</ul>
</div>
</div>
<div class="sub-content"> - Description of section goes here - </div>
</div>
</div>

Drop Down

Accelorator

Accelerator Corporation, Seattle WA – privately-held biotechnology investment and development company that can identify, finance and manage the development of emerging biotechnology opportunities.

Alliance of Angels

Alliance of Angels, one of the largest and most active angel groups in the Pacific Northwest of seasoned entrepreneurs or senior business executives who provide a network of relationships and experience in building and growing companies

Images

Images can be done in two ways the first is in halves like this. Give the section a class of half-image.

In the image column, give the class of img-sm-feature and set the image and the background image.

Application Process list

To create this list, label your hr with a class that you will use to call out the content in the circle using css. ex: <hr class=”txt step1″>

In css, it will look like this
hr.txt.step1:after {
content: “Jul 28”;
}

label the section with an h3

Due date is bold

insert letter or form here

label the section with an h3

Due date is bold

insert letter or form here

label the section with an h3

Due date is bold

insert letter or form here