Styles – ARYA Clothing

Custom Event Setup

×

Click on the elements you want to track as custom events. Selected elements will appear in the list below.

Selected Elements (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

    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


    Pre-loader