Styleguide – Nécessaire

Skip to content

[Subscribe & Save 15%](/content/pages/subscribe "https://necessaire.com/pages/subscribe"/index.html)

Free US Shipping | Orders $75+

[Subscribe & Save 15%](/content/pages/subscribe "https://necessaire.com/pages/subscribe"/index.html)

Free US Shipping | Orders $75+

Close

Menu

Shop

Body

Hair

Sets

Travel

About

[My Account](/content/account/login "Login or register"/index.html)

New! The Hand Wash + The Hand Lotion.

Styleguide

This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file named page.styles.liquid.

Table of Contents

Fonts

Graebenbach Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Graebenbach Black Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Graebenbach Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Graebenbach Bold Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Graebenbach Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Graebenbach Medium Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Graebenbach Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Colors

greyscale

Black

#111

$black

White

#fff

$white

Grey Bergamot

#757575

$grey-bergamot

Grey Silver

#c4c4c4

$grey-silver

Grey Seashell

#f1f1f1

$grey-seashell

Main

Sand

#c4c4bd

$sand

Eucalyptus

#b2bab0

$eucalyptus

Red

#EB0000

$red

Red Valencia

#db4b4b

$red-valencia

Typography

Headings

H1 Graebenbach Medium

H2 Graebenbach Medium

H3 Graebenbach Medium

Type variations

P1 Graebenbach Bold Regular

P2 Graebenbach Bold

P3 Graebenbach Bold Regular

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien.

Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros.

Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper.

Type styles

Text Utilities

Background Color Utilities

Buttons

Primary button Secondary button Primary Outline button Secondary Outline button

Primary button (Disabled) Secondary button (Disabled) Primary Outline button (Disabled) Secondary Outline button (Disabled)

Block Level Primary Button Block Level Secondary Button Primary Outline button Secondary Outline button

Link Button

Small Primary Button Small Secondary Button

Large Primary Button Large Secondary Button

Forms

Forms are based on Bootstrap 4's form component. Simple examples to listed here to use as a reference for styling, for more detailed information about how they work, please see the official documentation.

Default Forms

Label

Label 2

Text Field (Valid)

Validation Feedback goes here

Text Field (Error)

Invalid Feedback goes here

Label 3-- Choose --Option 1Option 2Option 3

-- Choose --

I'm helper text to explain what's going on with this form input.

Invisible labels

Add a class of sr-only to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

First Name

Last Name

Email

Horizontal Forms

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your label elements as well so they’re vertically centered with their associated form controls.

Text Field

Placeholder

Disabled Field

Text Field (Valid)

Text Field (Error)

Select Field

-- Choose --Option 1Option 2Option 3Option 4

-- Choose --

Text Area

Default checkbox

Default checkbox

Disabled checkbox

One Time Delivery

Subscribe With Benefits

Disabled radio

Radio with Icon

Second Radio with Icon

Textarea

UI Elements

Breadcrumbs

Pagination

[1](/content/pages/styleguide# ""/index.html)2[3](/content/pages/styleguide# ""/index.html)[10](/content/pages/styleguide# ""/index.html)

Social Sharing

ShareShare on Facebook TweetTweet on Twitter Pin itPin on Pinterest TumblrShare on Tumblr EmailShare via Email

Minimal Input

Normal

Search

Inverted

Search

Large

Search

CloseRemove

Give The Gift Of Nécessaire.

E-gift cards can be scheduled for immediate delivery or at a date and time of your choice. You will be able to email the gift card to an email address of your choice - your own email address or the email address of the person you are gifting.

To

To is required

Invalid

From

From is required

Invalid

Message

0/210

Message is required

Invalid

Recipient's email

Invalid

Recipient's phone number

Invalid

Enter a mobile phone number

Email and/or phone number is required

When should we send your message?

Select a method for your message

Your message will be sent when you complete your order

Your message will be sent at the selected date and time

Date

Date is required

Select a date in the future

Time12:00 AM12:30 AM1:00 AM1:30 AM2:00 AM2:30 AM3:00 AM3:30 AM4:00 AM4:30 AM5:00 AM5:30 AM6:00 AM6:30 AM7:00 AM7:30 AM8:00 AM8:30 AM9:00 AM9:30 AM10:00 AM10:30 AM11:00 AM11:30 AM12:00 PM12:30 PM1:00 PM1:30 PM2:00 PM2:30 PM3:00 PM3:30 PM4:00 PM4:30 PM5:00 PM5:30 PM6:00 PM6:30 PM7:00 PM7:30 PM8:00 PM8:30 PM9:00 PM9:30 PM10:00 PM10:30 PM11:00 PM11:30 PM

Time is required

Select a time in the future

Your message will be sent when your order is delivered to your shipping address

Save messageAdd to cart

Powered by

Message saved

Gift card added to cart!

Message removed

Add a gift message 🎁Edit gift message 🎁

Check the balance of your gift card

Searching...

Not found

Expired on

Balance:

Initial balance:

Expires on:

CloseRemove

Give The Gift Of Nécessaire.

To

To is required

Invalid

From

From is required

Invalid

Message

0/210

Message is required

Invalid

Recipient's email

Invalid

Recipient's phone number

244 results found

No results found

Invalid

Enter a mobile phone number

Email and/or phone number is required

When should we send your message?

Select a method for your message

Your message will be sent when you complete your order

Your message will be sent at the selected date and time

Date

Date is required

Select a date in the future

Time is required

Select a time in the future

Your message will be sent when your order is delivered to your shipping address

Save messageAdd to cart

Powered by

Message saved

Gift card added to cart!

Message removed

necessaire.com

necessaire.com is blocked

This page has been blocked by an extension

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

necessaire.com

necessaire.com is blocked

This page has been blocked by an extension

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

necessaire.com

necessaire.com is blocked

This page has been blocked by an extension

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

necessaire.com

necessaire.com is blocked

This page has been blocked by an extension

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

shop.app

shop.app is blocked

This page has been blocked by an extension

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Close Cart

Free Shipping

Progress: 0%

$75.00 To Qualify For Free Shipping.

Your Cart

Start Here

Shop Bestsellers