Typography by Design Collective

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

Leads / Perex - Sofia Pro Light

XL 36/50

Since 1950, Orient Watch has specialized in the manufacture and growth of mechanical timepieces.

L 32/40

Since 1950, Orient Watch has specialized in the manufacture and growth of mechanical timepieces.

M 26/40

Since 1950, Orient Watch has specialized in the manufacture and growth of mechanical timepieces.

S 24/35

Since 1950, Orient Watch has specialized in the manufacture and growth of mechanical timepieces.

T 20/30
Since 1950, Orient Watch has specialized in the manufacture and growth of mechanical timepieces.

Body - font Source Sans

XL 20/35

However, it’s clearly taken design cues from its predecessors. The thin, modern hour markers and hands are borrowed from the Bambino Version 4, while the signed onion-styled crown is similar to the one found on the Version 2.

It wouldn’t be considered a Bambino without its signature domed dial and crystal. Dimensions-wise it lines up with the Bambino SS: 40.5mm wide and just 12mm thick. It is powered by the polished caliber F6T22, a movement developed specifically for our open heart watches.

L 18/30

However, it’s clearly taken design cues from its predecessors. The thin, modern hour markers and hands are borrowed from the Bambino Version 4, while the signed onion-styled crown is similar to the one found on the Version 2.

It wouldn’t be considered a Bambino without its signature domed dial and crystal. Dimensions-wise it lines up with the Bambino SS: 40.5mm wide and just 12mm thick. It is powered by the polished caliber F6T22, a movement developed specifically for our open heart watches.

M 16/20

However, it’s clearly taken design cues from its predecessors. The thin, modern hour markers and hands are borrowed from the Bambino Version 4, while the signed onion-styled crown is similar to the one found on the Version 2.

It wouldn’t be considered a Bambino without its signature domed dial and crystal. Dimensions-wise it lines up with the Bambino SS: 40.5mm wide and just 12mm thick. It is powered by the polished caliber F6T22, a movement developed specifically for our open heart watches.

Lists 16/30

Line 1

Line 2

Line 3

S 14/20

Image with an optional side note: One of many photos capruting atmosphere from photoshooting in Japan for Orient brand new collection.

Semantic Headings - Sofia Pro Reg

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. OrientWatchUSA heading Secondary text

h2. OrientWatchUSA heading Secondary text

h3. OrientWatchUSA heading Secondary text

h4. OrientWatchUSA heading Secondary text

h5. OrientWatchUSA heading Secondary text
h6. OrientWatchUSA heading Secondary text

Paragraphs & Body

OrientWatchUSA's global default font-size is 16px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.


Lead Copy

Make a paragraph stand out by adding .lead class.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.


Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

Blockquotes

For quoting blocks of content from another source within your document.

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


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
Inline
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Unstyled
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Rich Text Editor 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


Responsive tables

Order Date Payment Status Fulfillment 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 this theme, 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 this theme but are commonly added to handle form errors. Example styles:

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

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

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

Example usage:

    {% if form.posted_successfully? %}
      <p class="note form--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

Outline

Inverse

Wide


Miscellaneous elements

Horizontal Rules

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

Default hr


Invisible hr.hr--clear


Small hr.hr--small



SVG icons

Read more about using, creating, and editing SVG icons in this theme's documentation.

Payment icons

Social icons

General icons

  • icon-cart Created with Sketch.
  • icon-search Created with Sketch.
x
Your cart
- +
You don't have any items in your cart.

Close this and continue shopping