WEB ELEMENTS

BUTTONS

Button Styling

Primary and secondary buttons should always appear in Pinnacle purple. Note the rounded corners, minimum width, and use of the caret. Inactive buttons are characterized by a low opacity and a "not-allowed" cursor status.

Primary ›Inactive ›

.button {
  min-width: 150px;
  padding: 15px 30px;
  border: 1px solid #662483;
  border-radius: 4px;
  background-color: #662483;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  text-align: center;
  font-weight: 500;
}
‍
.button:hover {
  background-color: #fff;
  color: #662483;
}

.inactive {
  opacity: 0.3;
  cursor: not-allowed;
}

Secondary ›Inactive ›

.button.secondary {
  background-color: #fff;
  color: #662483;
}

.button.secondary:hover {
  opacity: 0.3;
}

.inactive {
  opacity: 0.3;
  cursor: not-allowed;
}

Tertiary ›Inactive ›

.button.tertiary {
  border-color: #d8d8d8;
  background-color: #fff;
  color: #3b3c40;
  font-weight: 400;
}

.button.tertiary:hover {
  background-color: #f4f4f4;
}
‍
.inactive.tertiary {
  background-color: #f4f4f4;
  opacity: 0.5;
  cursor: not-allowed;
}

HYPERLINKS

Hyperlink Styling

Hyperlinks should appear in Pinnacle purple and change to aqua on hover. Use a caret only when the copy is acting as a call to action and can stand on its own (e.g. Shop now ›).

What is Promotional Marketing? Getting Your Swag On for Your Startup

Explore promotional marketing and how to get your swag on for your newest business endeavor.

a {
  color: #662483;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
}

a:hover {
  color: #3fb5e5;
}

PRODUCT TILES

Tile Properties

Product tiles should use the following transitions and hover effects.

.tile {
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.tile:hover {
  border: 1px solid #e1e1e1;
  box-shadow: 0 2px 11px rgb(0 0 0 / 13%);
}

Tile Labels

Best Seller

Trending

NetKnacks

Limited Stock

Sale

24 Hour Rush