Typography

Basic CSS for Headings, Body Copy and Emphasis.

Headings

There are main headings from <h1> to <h5> that are customized by elcom Platform.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

The headings can be combined together consistently to define a template for a page. For example, h3 for main title and h4 for the sub titles

Page Title


Sub title part 1


Sub title part 2

To define a line next to headings, simply use the titleWithBorder class.

To define a large cover title, simply use the hero-unit class.

Cover Title

All headings are defined in bootstrap.css which is customized by elcom-platform.css. In particular:

Heading Font Size Apply For
.hero unit h1 60px Cover Titles, Page Titles, Product Titles
h1 36px Top level headings, Main subjects
h2 30px Important subjects
h3 24px Sub main important subjects
h4 18px Main headings of a sub important subject
h5 14px Sub content headings of a sub important subject

In some cases, the font size can be smaller depending on its purpose:

Font Size Apply For
13px Default font size for body copy, default menu, default button.
12px Minor content notice, used for specific purposes.
11px Mini text content, used for specific purposes.
Font Color Title Apply For

#333333

 Dark Gray Default color for all titles, texts, text input, and labels.

#808080

 Medium Gray Text color in navigations, used for special purposes.

#999999

 Light Gray Default gray color for small texts, sub-titles, and text explanations.

#2F5E92

 Electric Blue Emphasized titles, text hover or press, hyper-links or selected links.

Wiki Home

 Title Blue Helvetica Neue - Bold - 24px - #2F5E92 - Drop Shadow

My Draft

 Title Normal Helvetica Neue - Bold - 18px - #333333 - Drop Shadow
Mobile Team Organization Normal Helvetica Neue - Regular - 13px - #333333
Added by Khemais Menzli at Oct 25, 2012 10:11 AM Minor Helvetica Neue - Regular - 12px - #999999 - #2F5E92

Body Copy

By default, font style of a page inherits from the CSS style of body. In details:

Object Style
font-size 13
line-height 18
font-family "Helvetica Neue", Helvetica, Arial, sans-serif
color #333333

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula

For other basic CSS, there is no change between the elcom Platform style and Bootstrap:

Lead body copy

Make a paragraph stand out by adding .lead. This can be used for describing main content or cover.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula

To obtain consistency among product main pages, .hero unit can be used for product title and .lead can be used for product description.

Product Title

Short description about the product

Emphasis

Small

Following the elcom Platform style, the emphasis has a bit different on the <small> tag.

Updated on Sep 13, 2013 11:40 AM.

Bold

Simply add the <strong> tag to define bold effect for important content.

UX-Guidelines is to provide an overview and details about the elcom Platform style.

Italics

Simply add the <stress> tag to define italic effect for text.

elcom Platform includes Portal, ECMS, Social, Forum, Calendar...