Styles – The Story Boxx

Welcome to the Fastest Growing Startup in the Materials space! Welcome to The Story Boxx!

The Story Boxx
The Story Boxx
The Story Boxx
The Story Boxx
Materials
Brands
Learning
About
About
The Story Boxx Approach
The Story Boxx Story
The Story Boxx Team
How it Works?
Contact Us
Boxx (0) 0

Styles

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.


Typography

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

H1 HEADING

H2 HEADING

H3 Heading

H4 Heading

H5 HEADING
H6 Heading

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

Receive our newsletter and discover our stories, collections, and surprises.

  • New In
  • Sale & Special Offers
  • Women
  • Men
  • Shoes
  • Bags & Accessories
  • Top Brands
  • Lookbook
  • Lorem ipsum dolor sit amet
  • Conse ctetur adipisicing elit sed do
  • Eiusmod tempor
  • Incididunt ut labore et dolore magna
  • Ut enim ad minim veniam
  • Fabric 1: 100% Polyester
  • Fabric 2: 100% Polyester,Lining: 100% Polyester
  • Fabric 3: 75% Polyester, 20% Viscose, 5% Elastane
  1. Fabric 1: 75% Polyester, 20% Viscose, 5% Elastane
  2. Fabric 2: 100% Polyester,Lining: 100% Polyester
  3. Fabric 3: 100% Polyester

RTE headings

RTE heading one

RTE heading two

RTE heading three

RTE heading four

RTE heading five
RTE heading six

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Type styles

  • Strong
  • Emphasis
  • Inline link
  • Strike
  • Sup

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Lists

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four

Responsive tables

ORDER DATE PAYMENT STATUS FULFILLMANT STATUS TOTAL
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03
#1005 December 26, 2015 Authorized Unfulfilled $47.03
#1006 December 27, 2015 Authorized Unfulfilled $48.03

Forms

Default form elements

Invisible labels

Add a class of label-hidden 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.


Vertical forms (customer, contact, etc)

No styles for this exist in Slate, but are used in most themes. Style elements inside a form/div with class `form-vertical` to see your styles here.

You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-vertical to achieve the same effect.

Checkboxes

Radios

Notes and form errors

No note styles exist in Slate but are commonly added to handle form errors. Example styles:

 .note {
 padding: 20px;
 border: 1px solid #ccc;
 }

 .note--success {
 border-color: green;
 background-color: lightgreen;
 }

 .note--error {
 border-color: red;
 background-color: lightred;
 }
 

Example usage:

 {% if form.posted_successfully? %}
 <p class="note note--success">Thanks for submitting the form</p>
 {% endif %}

 {% if form.errors %}
 <div class="note note--error">
 {{ form.errors | default_errors }}
 </div>
 {% endif %}
 
This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Buttons

Default button

Default button (no defaults)

Button disabled

Default button disabled

Wide button

Wide default button


Miscellaneous elements

Horizontal Rules

There are no default hr styles in Slate, but these are common ones to add.

Default hr


Invisible hr.hr--clear


Company
  • Our Story
  • The Story Boxx Approach
  • The Story Boxx Team
  • Client Testimonials
  • Contact Us
Support
  • How it Works?
  • Save the Planet Approach
  • Vendor T & C
  • SODO T & C
Policies
  • Whats new?
  • Curated Combos (Coming Soon)
  • Join Us
Contact Us

The Story Boxx Store
2nd Floor
2, DSIDC, Okhla Phase 1

New Delhi 110020
Email ID - hello@thestoryboxx.com
Hotline No.- +91 73960 50505

RECEIVE OUR WEEKLY NEWSLETTER
Sign Up Now!
Follow us

Samples Decoded

© 2020 The Story Boxx. All Rights Reserved. Tesbox Technology Pvt. Ltd.

The Story Box, A unit of Tesbox Tech Private Limited (India). All intellectual property & rights reserved.

TOP

WHAT ARE YOU LOOKING FOR?

View all materials

Empty result

MY STORY BOXX

SUBTOTAL

PROCEED TO CHECKOUT VIEW STORY BOXX
Your story boxx is empty.
THE STORY BOXX
VIEW THE STORY BOXX
Your Story Boxx is empty.
MY ACCOUNT
RETURN TO STORE
Forgot Your Password?

SIGN UP

Enjoy the benefits of registering:

  • Order: view Order History, track and manage purchases and returns
  • Address Book and Card Wallet: safely store delivery and payment details for faster checkout
  • Saved for later: wish list your preferred items and track their availability
Sign up now!
SIGN UP
RETURN TO STORE
HERE TO HELP

Thanks for subscribing!

Continue shopping

Size Guide

This is an approximate conversion table to help you find your size. If you have already purchased an item by our brand, we recommend you select the same size as indicated on its label.

WOMEN'S APPAREL SIZING

INTERNATIONAL XS S M L XL XXL XXXL
EUROPE 32 34 36 38 40 42 44
US 0 2 4 6 8 10 12
CHEST FIT (INCHES) 28" 30" 32" 34" 36" 38" 40"
CHEST FIT (CM) 716 76 81 86 91.5 96.5 101.1
WAIST FIR (INCHES) 21" 23" 25" 27" 29" 31" 33"
WAIST FIR (CM) 53.5 58.5 63.5 68.5 74 79 84
HIPS FIR (INCHES) 33" 34" 36" 38" 40" 42" 44"
HIPS FIR (CM) 81.5 86.5 91.5 96.5 101 106.5 111.5
SKORT LENGTHS (SM) 36.5 38 39.5 41 42.5 44 45.5

MEN'S APPAREL SIZING

INTERNATIONAL XS S M L XL XXL XXXL
EUROPE 32 34 36 38 40 42 44
US 0 2 4 6 8 10 12
CHEST FIT (INCHES) 33-35" 36-38" 39-41" 42-44" 45-47" 48-50" 51-53"
CHEST FIT (CM) 84-89 91-97 88-104 107-112 114-119 122-127 129-134
WAIST FIR (INCHES) 28" 30" 32" 34" 36" 38" 40"
WAIST FIR (CM) 71 76 81 86 91.5 96.5 101.5
SKORT LENGTHS (SM) 76 77.5 79 81 82.5 84 85.5

Shipping

  • Complimentary ground shipping within 1 to 7 business days
  • In-store collection available within 1 to 7 business days
  • Next-day and Express delivery options also available
  • Purchases are delivered in an orange box tied with a Bolduc ribbon, with the exception of certain items
  • See the delivery FAQs for details on shipping methods, costs and delivery times

Returns And Exchanges

  • Easy and complimentary, within 14 days
  • See conditions and procedure in our return FAQs

WISH LIST AND COMPARE

Do you want to add materials to your personal account?

    YES
    NO
    Pre-loader

    Full-Size Sample Request