Skip to content

New Webolution Content Elements

Please use these new elements properly. Overuse may defeat their purpose for simplifying our web pages. Also note that elements cannot be nested within each other.

Several new elements have been created for use with the Webolution project so our content can be better organized and presented to our website visitors. Because most users scan the page looking for specific content and then explore in more detail once they find what they're looking for, these elements help us reduce the clutter on our pages but still have content quickly available when users find what they're looking for.

Default button

Just above us is a new button element. It's nothing more than a normal link with a class of "button-default" to give it a little more attention. There is usually only one "default" button, which is the button people should click most of the time. But there are also plain buttons that can be used, like this one:

Another button

Buttons should be used to perform an action, such as downloading a file or registering for something. They should not be used for simple navigation to other pages, since that's what a link is for.


We can also add tabs to the page, which are best used to display different views of similar information, such as a list view and map view. Tabs are common on ecommerce sites to provide quick access to an item's details, specifications, reviews, etc. Tabs should not be used for drilling into information, but they are useful for seeing different views of similar information.


  • Bottled Drinks
  • Brewed Coffee
  • Chocolate Beverages
  • Espresso Beverages
  • Frappuccino® Blended Beverages
  • Kids’ Drinks & Others
  • Smoothies
  • Starbucks Refreshers™ Beverages
  • Teas
  • Iced Coffee
  • Iced Tea


  • Bakery
  • Starbucks Petites
  • Bistro Boxes
  • Hot Breakfast
  • Sandwiches, Paninis & Salads
  • Ice Cream
  • Yogurt and Fruit
  • La Boulange


  • Food Nutrition
  • Drink Nutrition
  • Delicious Drinks Under 200 Calories
  • Favorite Foods Under 350 Calorie


While the tabs provide views into similar, related content, the accordion elements are useful for collapsing content to remove some of the visual distractions so users can quickly scan the page for the content they want, then tap or click the accordion heading to "drill in" to see more. We have two different styles of accordions and each one has a very specific use. The first one we often call and expanding link, because it looks like a link that expands to show the hidden content.

The expanding link is best used for similar content that would fit into a list. A good example is below, where we provide additional information about each department in Administrative Services.


Here is where we'd add more information about this division.

Central Services

Here is where we'd add more information about this division.

Information Technology

Here is where we'd add more information about this division.


Here is where we'd add more information about this division.

Revenue Services

Here is where we'd add more information about this division.


Here is where we'd add more information about this division.

Another accordion is the expanding headline, which is best used to collapse different sections of content that are not so closely related. A good example is the Committees and Commissions pages on our website, which have different sections of content, like this:


Composed of nine (9) members representative of the following industries: One Timber, One Livestock, One Fruit and Nut Farming, One Field Crop - Rice Farming, One Agricultural Processing, One Small Farm Industry, One Foothill Farm Industry, One Citrus Industry and One representative of the Nursery Industry. Term is 4 years. Appointed by Board of Supervisors as designated in County Code 2.927. The County Farm Advisor shall serve as an ex-officio member. Established by Ord. 4514-B dated 06/15/93, Amended by Ord. 4864-B. Ord. 5076-B 01/09/01.


Meetings will be held at least quarterly and more frequently as determined by the Commission up to a maximum of 12 meetings per year. Meetings are held in the Planning Commission Chambers, 3091 County Center Drive, Auburn, CA 95603.


Members of the Commission shall receive $40.00 per meeting attended, actual and necessary expenses incidental to the proper execution of their duties, and such necessary traveling and other official expenditures necessitated by their official duties as shall be approved by the Board of Supervisors.

Notice how each heading describes a different section of content, while the expanding links are used for a list of divisions? If you need help deciding which accordion to use, just get in touch with the Web Team--we're happy to help.

FAQ Element

Another element available is specifically designed for Frequently Asked Questions (FAQ). This element is very similar to the accordions in how it collapsed the content for each answer, but quickly shows it when a visitor clicks on the related question. This element makes it simple to add and maintain an FAQ page. Here's a sample of how it looks and works:

How long should a question be?

The question should be brief, yet descriptive. If it's too long it can overwhelm the visitor, who is typically scanning the page for what they're interested in.

Can I have more than one block of questions on the page?

Yes. If you different groups of questions you can add an FAQ element for each one. You should also add a Heading 2 before each FAQ to describe the type of questions contained in that section of the page.

Can I remove the expand/collapse all links at the top of the FAQs?

Yes, but we encourage you to leave those controls because many people like to quickly collapse or show the answers, especially when they want to print the page.

Treeview for Structured Content

Sometimes we have a lot of information to list on a page that can be organized as nested lists. Agendas and staff reports are a great example of this. Everything gets listed by date, and under each date we list out the agenda items for that date. Some of those agenda items are staff reports--yet another list of content. The treeview element lets us collapse all those nested lists so the visitor sees just the first list (the dates) so they can quickly scan through and find the right item. When they click that item, it then reveals the nested sub-list items. Using the treeview element, visitors can very quickly "drill down" to find the specific content they're looking for.

Content in Blocks

Some departments have brief lists of content or links on their home page that have been organized in tables so they appear as two columns. Tables pose a significant problem for mobile devices and should never be used for positioning content on a page. Tables are used for presenting tabular data, similar to a spreadsheet. To help display content in two columns but keep it all mobile-friendly, we have a new block element that will arranged content in two columns of equal height, when the screen is wide enough. For small screens like smartphones, the two columns will stack into a single column of content.

Content in blocks are displayed side-by-side in two columns, when the screen is wide enough. They are displayed with a border and each pair of blocks are sized to be the same height, so they look nice on the page.

Blocks might look nice, but they can be a usability problem because scanning a page with two columns of content can result in more work for the visitor. So only use blocks if you absolutely have to.

Notification Box

There may be times you need to draw attention to something, like holiday hours, special instructions, etc. The box element will wrap your content with a border and background color that is appropriate for the type of notification: alert, notify, related. These colors are standardized across the website to convey specific meaning, so please use the correct type of box for the content being highlighted.

The alert box should be used for something that is urgent, timely and temporary in nature. Holiday closure and new office location are two good examples of alerts.

The notify box is best used for notifications that are more permanent in nature. Notify boxes are designed to get attention, but not to the degree or urgency of the alert box.


If you visit many blogs, you've probably notices that many of them have a page that lists the first paragraph of several articles, and each paragraph ends with a link for "more" that takes you to the full article, or instantly displays the rest of the content right there on the page. Sometimes we have more information to share with people, but it may not be relevant for a large number of our visitors. About Us content immediately comes to mind... +more

With the + More element, you can hide that additional content from display until the user clicks/taps the + More link, and then the additional content is displayed on the screen. This is slightly different from using accordions, which are designed for drilling into content on a page. The + More element is used to shorten related content so the page is not visually overwhelming to visitors.

Please be careful using this element. Users will be frustrated if you interrupt their reading with the need to click a link to reveal the rest. But for additional information that is only needed/wanted by a small number of users, this element works well.