UW Brand

Buttons and bullet points

Buttons

Buttons are used as a call to action for site users. In this example, we added buttons to promote topics on interior site pages. Figure 1 provides a small snippet of the Guiding Principles page. The Learn More button sends the user to a more in-depth page. Add a button by including the [button] [/button] code.

This image highlights an example button titled Learn More

Figure 1. The example above visualizes the standard UW brand button (highlighted in yellow).

Button code

Code template

[button url="URL of designated page or document to lead users when button is 
clicked"]Button label[/button]

 

Example

[button url="https://www.washington.edu/ccri/transfer/"]Learn more[/button]

 
This is what the example code would show:
Learn more

 

Bullet points

Bullet points are a great way to list information and make the site easier to skim. On the Corporate Foundation & Relations site, we added bullet points to list all of the funding opportunities by category. Figure 1 shows the Corporate and foundation funding opportunities page where each of the hyperlinks bulleted will lead to a page with details on opportunities relating to that category.

Creating a bulleted is a simple 2-step process where you begin the list by including the code <ul> </ul> to create the bulleted list and then use the code <li> </li> for each bullet point in a list.

Bulleted list of Corporate Funding Oppotunities

Figure 2. The example above visualizes a standard bulleted list with hyperlinks.

Bullet point code

Code template

<ul>
<li>bulleted text</li>
<li>bulleted text</li>
<li>bulleted text</li>
</ul>

 

Example

<ul>
<li>Diversity, Equity and Inclusion</li>
<li>Education</li>
<li>Engineering, Computer and Data Science</li>
</ul>

 
This is what the example code would show:

  • Diversity, Equity and Inclusion
  • Education
  • Engineering, Computer and Data Science