Styleguide

h1 - 40/40 (mobile) - 55/55
Domaine Display Bold -0.69px

h2 - 34/37 (mobile) - 30/33 Domaine Display Bold 0.38px

h3 - 23/35 (mobile) 27/42 Domaine Display Regular

h4 - 14/24 Proxima Nova Semibold 1.08px

h5 - 14/19 Proxima Nova Semibold 0.5px
h6 - 12/15 Proxima Nova Semibold 0.92px

Display 1 - 55/47 (mobile) - 80/85
Domaine Display Bold -1.01px

Display 2 - 34/34 (mobile) -55/55
Domaine Display Regular

Display 3 - 18/30 Proxima Nova Semibold 1.08px

Display 4 - 18/30 Proxima Nova Semibold 1.08px

Body copy is 16/22 Proxima Nova. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Small body copy is 14/23 Proxima Nova. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Color

  • #212323
    $dark
  • #5E6060
    $grey-dark
    $secondary
  • #EEEEEE
    $light
  • #FF3668
    $pink
    .primary
  • #C8979A
    $pink-light
    .primary-light
  • #F5E9F3
    $pink-lighter
    .primary-lighter
  • #E27DE7
    $fushia
  • #A7D6CE
    $aqua
    $info
  • #C6D9E0
    $aqua-light
  • #FF5F23
    $orange
    $danger
  • #FFE000
    $yellow
    $warning

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

.bg-primary
.bg-primary-light
.bg-primary-lighter
.bg-secondary
.bg-success
.bg-danger
.bg-warning .bg-tertiary
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Buttons

Alerts

Vertial Headlines

Stacked

Add class "vert-stack" — Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas amet fugit ipsum similique nihil recusandae eligendi quam. Quia quis, consectetur modi, repellendus expedita obcaecati distinctio, qui non voluptatibus molestiae corporis?

Parallel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas amet fugit ipsum similique nihil recusandae eligendi quam. Quia quis, consectetur modi, repellendus expedita obcaecati distinctio, qui non voluptatibus molestiae corporis?

Forms

Tables

Artwork Title Description My Bid
A Sweet Ass Title Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. $1000
A Great Title of Some Art That Is Rather Long, Man Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. $14500
Some Art That Someone Made Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. $2100

Countdowns

Stacked

Bidding opens in

Stages Hide/Show

Pre-Bid Show
Pre-Bid Hide
Pre-Bid:
Hello!
Bid:
Hello!
Finished:
Hello!
Pre-Bid:
Hello!
Bid:
Hello!
Finished:
Hello!
Bid Show
Bid Hide
Pre-Bid:
Hello!
Bid:
Hello!
Finished:
Hello!
Pre-Bid:
Hello!
Bid:
Hello!
Finished:
Hello!
Finished Show
Finished Hide
Pre-Bid:
Hello!
Bid:
Hello!
Finished:
Hello!
Pre-Bid:
Hello!
Bid:
Hello!
Finished:
Hello!

Inline

Upcoming

Days left

Starts In

Hours left

Starts In

Minutes left

Starts In

Seconds left

Starts In

In progress

Minutes left

Ends In

Seconds left

Ends In

Finished

Bidding Ended

Sections spacing and dividers

Adjusts margin or padding based on md breakpoint.

.section-my, .section-mt, .section-mb
.section-py, .section-pt, .section-pb

Standard

<div class="section-my"></div>
<div class="section-my"></div>
Section 1. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Section 2. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

With divider

<div class="section-py"></div>
<div class="section-py">
    <div class="container border-top section-pt"></div>
</div>
Section 1. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Section 2. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Background Gradient 1 - General

Background Gradient 2 - About Section

Background Gradient 3 - Artists Section

Background Gradient 4 - Auctions Section

Background Gradient 5 - Bidding/Selling Section

Background Gradient 6 - Giving Back Section

Background Gradient 6 - Giving Back Section