Skip to main content
  • About
  • Reviews
  • Contact
  • Search
  • Account
  • My Wish List
Henry B. Ball Jewelers logo
  • Engagement
    • Search Diamonds
    • Find the Perfect Setting
    • Shop Engagement Rings
    • Diamond Education
  • Jewelry
    • Engagement Rings
      • Semi-Mount Engagement Rings
      • Complete Engagement Rings
    • Wedding Bands
      • Men's Wedding Bands
      • Women's Wedding Bands
      • Anniversary Bands
    • Fashion Rings
      • Gemstone Fashion Rings
      • Diamond Fashion Rings
    • Earrings
      • Gemstone Earrings
      • Diamond Earrings
      • Earring Jackets
    • Bracelets
      • Gemstone Bracelets
      • Diamond Bracelets
      • Bangle Bracelets
    • Necklaces
      • Chains
      • Gemstone Necklaces
      • Diamond Necklaces
    • Pendants
      • Gemstone Pendants
      • Diamond Pendants
      • Locket Pendants
    • Pins
    • Cufflinks
    • Sets
    • Other
  • Watches
  • We Buy Gold
  • Education
    • Jewelry Education
    • Diamond Education
      • The Four Cs of Diamonds
      • Diamond Buying Tips
    • Choosing The Right Setting
    • Learn About Gemstones
      • Birthstone Guide
      • Gemstone Guide
    • Precious Metals
    • Jewelry Care
      • Caring for Fine Jewelry
      • Diamond Cleaning
      • Gemstone Cleaning
    • Anniversary Guide
    • Gold Buying Guide
  • Services

UI-Kit Preview

Colors Buttons Forms Widgets Typography Content Nav System Classes
Colors
Color palette
Primary:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $primary->bg['0'] ?>;
color: #<?php $primary->fg['0'] ?>;
Secondary:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $secondary->bg['0'] ?>;
color: #<?php $secondary->fg['0'] ?>;
Default:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $form->bg['0'] ?>;
color: #<?php $form->fg['0'] ?>;
Dark:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $dark->bg['0'] ?>;
color: #<?php $dark->fg['0'] ?>;
System colors
Danger:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $danger->bg['0'] ?>;
color: #<?php $danger->fg['0'] ?>;
Warning:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $warning->bg['0'] ?>;
color: #<?php $warning->fg['0'] ?>;
Success:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $success->bg['0'] ?>;
color: #<?php $success->fg['0'] ?>;
Information:
-5
-4
-3
-2
-1
0
1
2
3
4
5
background-color: #<?php $info->bg['0'] ?>;
color: #<?php $info->fg['0'] ?>;
Backgrounds
Various backgrounds:
[OBJ]Body
[OBJ]Section (default)
[OBJ]Section (inset)
[OBJ]Section (alt)
[OBJ]Footer
Buttons
Styles
Primary button:
Resting
Hovering
Focused
Disabled
Secondary button:
Resting
Hovering
Focused
Disabled
Default button:
Resting
Hovering
Focused
Disabled
Dark button:
Resting
Hovering
Focused
Disabled
Light button:
Resting
Hovering
Focused
Disabled
Outlined button:
Outline primary
Outline secondary
Outline dark
Outline light




Sized button:
Extra small
Small
Medium
Large
Extra large




Button width:
Extra small only
Small only
Always


Form elements
Text field
Text input:
Resting
Focused
Populated
Disabled

  
  
Phone input:
Resting
Focused
Populated
Disabled

  
  
Email input:
Resting
Focused
Populated
Disabled

  
  
Select menu
Standard menu:
Resting
Focused
Populated
Disabled

  <select class="selectpicker" data-style="form-control" name="label">
    <option value="" disabled selected class="d-none"></option>
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    <option value="3">Option three</option>
  </select>
  
  
Textarea
Autosized textarea
Resting
Focused
Populated
Disabled

  
  
Checkbox
Body for this
Radio
Body for this
Datepicker
Body for this
File upload
Body for this
Toggle
Body for this
Range slider
Body for this
Input group
Body for this
Widgets
Standard widget
Desktop style
Mobile style
Text-Overlay widget
Desktop style
Mobile style
Product widgets
Carousel card
Grid card
Solo card
Social widgets
Carousel card
[OBJ]Describe
[OBJ]Describe
[OBJ]Describe
[OBJ]Describe
Grid card
Solo card
Media feed
Default style
Sliders
Animation effects
Arrows
Dots
Tabs
Default style
Typography
Fonts
Body for this
Tags
Header sizes:

Header one text

Header two text

Header three text

Header four text

Header five text
Header six text

Header one text


Header two text


Header three text


Header four text


Header five text

Header six text
Paragraph sizes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.

Alternate markup
Reusing header classes:
Header three text
Block markup
Header three text
Extra large sizes:

Display text

Display text

Display text

Display text

Display text


Display text


Display text


Display text


Small tags in header:
Header six text Small text
Header six text Small text
Span tags in header:
Header six text Span text
Header six text Span text
Icon Kit
Body for this
Miscellaneous
Blockquote tags
Content
Images
Default
Videos
Embeded videos
Local MP4 files
Lists
Body for this
Tables
Body for this
Header rules
Body for this
Navigation
Breakpoints
Body for this
Burger
Style
Desktop Dropdowns
Active dropdown animation
Animations
Mobile menu
Position
System elements
Pagination
Body for this
Breadcrumbs
Body for this
Popovers
Default style
Modals
Animation?
Style?
Backdrop
Page loading
Animation
Backdrop
Alerts
Standard alerts
Popup alerts
Tooltips
Default style
Classes
Sections
Body for this
Containers
Body for this
Rows
Body for this
Columns
Body for this
Margin
Body for this
Padding
Body for this
Alignment
Body for this
Text Alignment
Body for this
...
Henry B. Ball Jewelers
Dressler Road
Belden Village
5254 Dressler Rd NW
Canton, OH 44718
(330) 499-3000
Store Information
Hours
Monday - Friday:10:00am - 6:00pm
Saturday:10:00am - 5:00pm
Sunday:Closed
Education
  • Jewelry Education
  • The Four Cs of Diamonds
  • Diamond Buying Tips
  • Choosing the Ring
  • Birthstone Guide
  • Gemstone Guide
  • Precious Metals
  • Caring for Fine Jewelry
  • Diamond Cleaning
  • Gemstone Cleaning
  • Anniversary Guide
  • Gold Buying Guide
Designers
  • A. Jaffe
  • A. Link
  • Allison Kaufman
  • Ball Watch
  • Benchmark
  • Bulova
  • Charles Garnier Paris
  • Forge
  • Frederic Duclos
  • Frederick Goldman
  • Galatea
  • Honora
  • Imperial Pearls
  • Jabel
  • M-Clip
  • Nicole Barr
  • Overnight
  • Scott Kay
  • Stuller
  • Tamascus
  • Tantalum
  • Waterford
  • William Schraft
  • Yael Designs
Newsletter

Sign up for Newsletter and never miss our specials offers and news!

Follow us

© 2023 Henry B. Ball Jewelers. All Rights Reserved. Website designed, maintained, and hosted by Punchmark. Accessibility Statement.