Template:

Example:

Primary Button

CSS Class: button_primary

Use as a primary call to action. The primary button is a high contrast when combined with the light surface background. This button is styled with the brand's primary blue color, and this button continues to establish that connection with the user.

Best Practices:

• Ensure that the button has proper contrast with the background. If using the dark surface background, the secondary button would be a better fit.
• Look up the appropriate icon from Font Awesome for any button to ensure consistency.

                
** CSS **

.button_primary {
  background-color: #243966;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
}

.button_primary:hover {
  background-color: #29488b;
}


** HTML **

<button role="post button" class="button_primary">
  <i class="fa fa-pencil-alt"></i> Post
</button>
                
              

Template:

Examples:

The secondary button can be used for alternate actions like in the example shown on the left. To avoid confusing the user, it should only be used along with the primary button.

Best Practices:

• Ensure that the white text inside this button is not too small, as the contrast ratio is not as high as the primary button.

                
** CSS **

.button_secondary {
  background-color: #e63462;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
}

.button_secondary:hover {
  background-color: #ff3a6f;
}



** HTML **

<button role="cancel button" class="button_secondary">
  <i class="fa fa-share"></i> Share
</button>
                
              

Template:

Examples:

The tertiary button is generally for actions that do not need to be used very often. For example, it can be used to terminate a user account, or delete a post.

Best Practices:

• Similar to the secondary button, this should only be used when paired with at least the primary button to avoid confusing the user.

                
** CSS **

.button_tertiary {
  background-color: #4f4f4f;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
}

.button_tertiary:hover {
  background-color: #7b7b7b;
  color: white;
}


** HTML **

<button role="cancel button" class="button_tertiary">
  <i class="fa fa-ban"></i> Cancel
</button>
                
              

This component can be used to provide a search functionality on various areas on the website. For example, it can be used in the message board to search through existing posts. It can also be used to search through articles and content on the website.

Best Practices:

• Place the search bar in the top part of the page so that the user can see that it the ideal way to quickly search through content.
• Ensure that the blue button on the left has adequate contrast with the background.

                
** CSS **

.search_bar {
  display: flex;
  flex-direction: row;
}

.search_input {
  width: 100%;
  min-height: 30px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 2px solid black;
  border-right: none;
  padding-left: 2%;
}

.input_search:hover {
  border: 2px solid #7e7e7e;
  border-right: none;
}

.search_button {
  background-color: #243966;
  color: white;
  border: 2px solid black;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  min-width: 30px;
  cursor: pointer;
}

.search_button:hover {
  background-color: #e63462;
}


** HTML **

<form class="search_bar">
<input
class="search_input"
type="text"
placeholder="Search..."
/>
<button role="search button" class="search_button" type="submit">
<i class="fa fa-search"></i>
</button>
</form>
                
              

This long text box is used to collect long form user input. This can be used for comment posts, message board posts, or contact forms.

Best Practices:

• Make sure to put a label on this box so that the user understands what they are typing in.
• The size of this box can be customized to fit different interfaces using "height" and "width" style tags.

                
** CSS **

.input_text {
  resize: vertical;
  width: 100%;
  min-height: 30px;
  border-radius: 4px;
  border: 2px solid black;
  padding: 2%;
  box-sizing: border-box;
  min-height: 200px;
}

.input_text:hover {
  border: 2px solid #7e7e7e;
}


** HTML **

<textarea role="long text input" class="text_input" type="text"></textarea>
                
              

Short Input Box

CSS Class: input_short

The short input box is used for shortform input like names, or emails. This is generally used for elements like login and password entry boxes.

Best Practices:

• Like the long input box, ensure that these also have tags that indicate for the user what they are typing in.

                
** CSS **

.input_short {
  font-family: "Poppins", san-serif;
  font-size: 1rem;
  resize: vertical;
  width: 100%;
  border-radius: 4px;
  border: 2px solid black;
  padding: 2%;
  box-sizing: border-box;
  height: 30px;
  background-color: rgb(246, 246, 246);
  box-shadow: inset 3px 3px 5px rgb(205, 205, 205);
}

.input_short:hover {
  border: 2px solid #000000b8;
}


** HTML **

<input role="Short Input" class="input_short" type="text" placeholder="Placeholder...">