Fonts

Circular Std

Regular 400 / Bold 700

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

You can use classes as well: .h1, .h2, .h3, .h4, .h5 and .h6.

Paragraphs

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Icons

Buttons

Primary

Button example Button label Button link Button disabled Button with icon

Secondary

Secondary button Secondary button link Secondary button disabled Button with icon

Ghost

Button ghost label Button ghost link Button ghost disabled Button with icon

Ghost secondary

Button ghost secondary label Button ghost secondary link Button ghost secondary disabled Button with icon

Link button

Button example Button link Menu

Button with icon

Button with icon Button icon after

Extra button styles

Full button

Forms

Label example Label example Select an option Select an option Select an option Select example Button Option 1 Option 2 Option 3


This is an example
This is an example
This is an example

Label example

Image

Responsive image with lazy loading and aspect ratio

Lazyload enabled

The images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.

Lazyload disabled

The images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.

Color Swatches

Quantity Selector

Product Card

Product grid

Search bar

Variant selector

Product single

Accordion

Global Navigation

• • Get updates
  • Email Us

  Social

  • 260SS
  • NYC
  • LA
  • MIA
  • CHI
  • DAL

  • Accessibility
  • Careers
  • Locations
  • Help Center
  • Privacy Policy
• Shop Online
  • Shop Now
    • alicia adams alpaca
    • Something Navy
    • Wicker Wings
    • Shop all
  • Early Access Members only
    • Maison Close
    • Meira T
    • Ronny Kobo
    • Hemant and Nandita ...
    Sign in to shop early
  • Coming Soon
    • Alex Mill
    • Solid and Striped
    • APL
    • Area
    • Attersee
    • See more
In-Store Events
NY
LA
MIA
CHI
DAL
• Shop Now
  • Isabel Marant, (Lafayette) NY
  • COS, (NoMad) NY
  • Marc Jacobs, (Flagship) NY
  • Anne Fontaine, SoHo NY
  • Prabal Gurung, SoHo NY
  • Marina Moscone, SoHo NY
  • Callas Milano, SoHo NY
  • View All NY Events
• Coming Soon
  • Alice+Olivia, (Flagship) NY
  • Proper Cloth, (Lafayette) NY
  • Rag & Bone, (NoMad) NY
  • La Ligne, SoHo NY
  • Fleur du Mal, SoHo NY
  • View All NY Events
• Shop Now
  • Boll & Branch, LA
  • View All LA Events
• Coming Soon
  • Rag & Bone, LA
  • Naked Cashmere, LA
  • Nana Jacqueline, LA
  • Silvia Tcherassi, LA
  • BTB Los Angeles, LA
• Shop Now
  • Schutz and Alexandre Birman, MIA
  • View All MIA Events
• Coming Soon
  • Jacadi, MIA
  • Rent the Runway, MIA
  • Dossier, MIA
• Shop Now
  • 260 Chicago will return soon, Chicago
  • View All CHI Events
• Shop Now
  • 3 1 Phillip Lim, Dallas
  • View All DAL Events
• Coming Soon
  • VEJA, Dallas
NY
LA
MIA
CHI
DAL
• About us
• Rewards
• Get updates

• Email Us
• Social

  • 260SS
  • NYC
  • LA
  • MIA
  • CHI
  • DAL

• Accessibility
• Careers
• Locations
• Help Center
• Privacy Policy

Breadcrumbs

Default Carousel

Default carousel with products

+ More

-

Add

+ More

-

Add

+ More

-

Add

+ More

-

Add

+ More

-

Add

+ More

-

Add

+ More

-

Add

+ More

-

Add

Default carousel with heading

Banner Overlay - Top Left

Banner Overlay - Small Style

Banner Overlay - Mobile disable overlay style

Pagination

Alert message

Image grid

Heading with Heading Description

Class to hide elements

Classes available: hidden__mobile , hidden__tablet , hidden__desktop.

Reize the screen to see the other elements.

Full width container

Section Banner Slider

Liquid error (templates/page.style-guide line 746): Error in tag 'section' - 'banner-slider' is not a valid section type

Standalone add to cart with loading

Add to Bag

Add to cart form

Liquid error (templates/page.style-guide line 762): product form must be given a product

Timer component

Hot Trends Section

Event Detail

Read More

Don’t miss out! Sign-up for event notifications

Thanks for signing up!

Submit

By signing up to be notified for this event, you consent to receive email marketing + SMS (such as event announcements & pricing updates) from 260 Sample Sale. Consent is not a condition of any purchase. Message and data rates may apply. Message frequency varies. You can unsubscribe at any time by replying STOP or clicking the unsubscribe link (where available) in our messaging.

Inside the Sale + Price Table

Products Slider

Price Table Category

Price Table

Price Table

Image gallery slider

Modal

Required properties: data-modal-open on the btn open, data-modal-name on the modal container, the two with the same attribute, data-modal-close on the btn close, and data-modal on the modal container, the two without attribute defined

Sizes class:
modal__content--small - max-width: 20%,
modal__content--default - max-width: 40%,
modal__content--large - max-width: 60%,
modal__content--full-screen - width and height: 100%


Click on data-modal-open to open the modal with data-modal with same attribute and click on data-modal-close or outside the modal container to close

Open modal with image Open modal small Open modal default Open modal large Open modal full-screen

Coming soon

Don’t miss out! Sign-up for event notifications

Thanks for signing up!

Submit

By signing up to be notified for this event, you consent to receive email marketing + SMS (such as event announcements & pricing updates) from 260 Sample Sale. Consent is not a condition of any purchase. Message and data rates may apply. Message frequency varies. You can unsubscribe at any time by replying STOP or clicking the unsubscribe link (where available) in our messaging.

Instagram

Tooltip

Available alignments: left center right

Content you can add: any html code, as a form an image buttons a product

When click on the link the content will appear.

Collection Banner

Popup

The popup is floating around the page. It is located in the lower right corner of the screen.

Collection Filters

Filter & Sorting

Clear All

Grid view:

Apply Filters

open filters

Quick View

Placeholder product card

Medium Zoom

Progress Bar