Buttons can be created through a Text element by creating an anchor and then manually assigning a button class to the anchor tax through the HTML editor.

By default, when the class attribute is set to a value of button, you will get a button that does not expand to fill the space and has the default colors which are the primary colors for your site.

You can add the expanded class to your button class to force the button to fill the horizontal space that is available in the section of your site where the button is displayed.

Finally, you can append one of the following five classes to change the color of your button.

1. primary
2. secondary
3. success
4. alert
5. warning

Forms will be used to allow customers to interact with the website when requesting information or ordering products.  To keep things simple we automatically highlight fields that are in error or considered required but missing.  We also disable buttons if the form is in a state where the button should not be pressed.

The defaults work as is with a simple change for the primary color of the website that dictates the default colors for buttons.  Customers also occasionally change the error highlighting on form fields, but it is recommended that you always use a color to identified fields that are in error.

Images should be compressed through tinypng.com before adding them to the website to reduce the overall size of the image which will speed up time.  Images should also be large enough to fill the largest space on the site that you will expect to fill with the image. 

In this example, the images are all different sizes, but the width of the image is controlled through a 3 column grid layout that has been applied.

You'll also note that the 3rd image is clickable and contains a caption and hover text.

The slideshow is a standard slideshow that can be used to create slides from individual Picture or Text elements and even more complex content sections.  The slideshow comes standard with arrows that are positioned left and right to navigate through the slides as well as buttons below the slide show to navigate to a specific slide.

All slideshow controls can be adjusted with some additional CSS work if needed.

Tables are generated through various applications on the site and are used to present groups of product data, relationships between products and possible product detail.  We'll also use tables to identify products that are in the customer's shopping cart.

The following is an example of a simple table that is generated through an application that is similar to something you might see on the website.

The following colors are used on this site.  For each color, I've listed the hex value and the individual RGB colors.