eFile Court Documents with Ease

Styleguide

Here’s the style guide for blog posts and pages. Below you will see examples of common markup, default styles and examples of advanced styling.

Table of Contents


Add a State

There are a few extra steps when adding a new State:

  • Fill out the extra fields in the post (phone, links, resources, etc).
  • Optionally add content to override the default content.
  • Manually change the title (html title; not the post title). See the California page title as an example.
  • Add an entry to the contact form Subject field. It has to be “State eFiling”, just like the previous entries.
  • *Probably* create a redirect, so we have a pretty url (/california) for print materials. Ask someone if you’re not sure if this is necessary. Setup the redirect under Tools > Redirection, and follow the example for previous state entries, AND make sure to check the regex box.

Headers

<h1>

Mittens the kitten ate Tokyo Joe’s

<h2>

Mittens the kitten ate Tokyo Joe’s

<h3>

Mittens the kitten ate Tokyo Joe’s

<h4>

Mittens the kitten ate Tokyo Joe’s

<h5>
Mittens the kitten ate Tokyo Joe’s
<h6>
Mittens the kitten ate Tokyo Joe’s

Text Style

.text_xl

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

(default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_small

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_light

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

<span class="highlight">[TEXT]</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.


Align Text

.text_center

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

.text_right

Lorem ipsum dolor sit amet, consectetur adipisicing 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.


Blockquote

<blockquote>
   <p>[QUOTE]</p>
   <p class="text_small">
      <em>&mdash;[SOURCE]</em>
   </p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

They’ve done studies, you know. 60% of the time, it works everytime.

— Brian Fantana in Anchorman

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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Drop Cap

<span class="drop_cap">[LETTER]</span>

T eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.


Align Images

Content will wrap around the image with the exception of .align_center.

  • .align_left
  • .align_right
  • .align_center
<img class="align_left" src="example.jpg" alt="image-description">

image-descriptionLorem ipsum dolor sit amet, consectetur adipisicing 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. image-descriptionDuis 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 adipisicing 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.

image-description


Responsive Video

This should work with all of the major video sources (youtube, vimeo, etc.) as long as they provide an embed that uses an iframe.

<div class="responsive_video break_small">
  [INSERT IFRAME EMBED CODE]
<div>

Fluid Width

Add a width(25, 35 … 75) AND .align_ left OR right to quotes, boxes or any div.

<div class="align_right width_35 box">[CONTENT]</div>

<p>[CONTENT]</p>

width_35 align_right box_gray

Lorem ipsum dolor sit amet, consectetur adipisicing elit

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 adipisicing 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.


Columns

<div class="cols">
   <div class="col_50">[CONTENT]</div>
   <div class="col_50">[CONTENT]</div>
</div>

.col_50

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.col_50

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.


.col_66

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, consectetur adipisicing.

.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.


.col_25

Lorem ipsum dolor sit amet, consectetur.

.col_25

Lorem ipsum dolor sit amet, consectetur.

.col_25

Lorem ipsum dolor sit amet, consectetur.

.col_25

Lorem ipsum dolor sit amet, consectetur.


.col_75

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, consectetur adipisicing.

.col_25

Lorem ipsum dolor sit amet, consectetur.


Note: Remove the width and height attributes, so images can scale proportionally to their parent container, specifically on mobile devices.

image-description
image-description
image-description

Page Layout

An example of markup for pages with content and a sidebar.

<div class="cols">
  <div class="col_75">
    [CONTENT]
  </div>
  <div class="col_25 text_small">
    [SIDEBAR]
  </div>
</div>

Flowing Columns

Flowing columns will flow content from one column to the next, just like a newspaper.

  • .cols_flow_two
  • .cols_flow_three
  • .cols_flow_four

Note: This is NOT supported in IE<=9. The content will appear in a single continuous column.

<div class="cols_flow_two">
   <p>[CONTENT]</p>
</div>

Lorem Ipsum Dolor

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


  • Alabama
  • Alaska
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • Florida
  • Georgia
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
  • Louisiana
  • Maine
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
  • Mississippi
  • Missouri
  • Montana
  • Nebraska
  • Nevada
  • New Hampshire
  • New Jersey
  • New Mexico
  • New York
  • North Carolina
  • North Dakota
  • Ohio
  • Oklahoma
  • Oregon
  • Pennsylvania
  • Rhode Island
  • South Carolina
  • South Dakota
  • Tennessee
  • Texas
  • Utah
  • Vermont
  • Virginia
  • Washington
  • West Virginia
  • Wisconsin
  • Wyoming

Tables

<table class="table_index">
  <thead>
      <tr>
          <th>[LABEL]</th>
          <th>[LABEL]</th>
      </tr>
  </thead>
  <tr>
      <td>[TEXT]</td>
      <td>[TEXT]</td>
  </tr>
</table>
Ipsum Consectetur Amet Dolor
Lorem Ipsum Dolor sit amet consectetur 100 Ipsum Dolor
Lorem Ipsum Dolor sit amet consectetur 89 Ipsum Dolor
Lorem Ipsum Dolor sit amet consectetur 5 Ipsum Dolor
Lorem Ipsum Dolor sit amet consectetur 43 Ipsum Dolor

Boxes

<div class="box">
   <h3>[HEADING]</h3>
   <p>[CONTENT]</p>
</div>

.box

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.

.box_gray

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.


Buttons

<a class="btn text_small" href="page.html">[TEXT]</a>

.btn .text_small .btn .btn .btn_gray


Anchor Links

Add id="a-headername" to a heading, then link to it with href="#a-headername".

Current Page

Link to anchor on the same page:

<h2 id="a-headername">[HEADING]</h2>

<a href="#a-headername">[TEXT]</a>

External Anchor

Link to anchor from email:

<h2 id="a-headername">[HEADING]</h2>

<a href="http://example.com/article#a-headername">[TEXT]</a>

Colors

 

4386BE

 

0D497C

 

E3E7EA

 

E14604

 

FFD44E

 

1DB477

Headers

  • Never make headings bold.
  • Do not include an h1 in blog posts. The blog post title creates an h1.
  • Only use one h1 per page. It should be the first element on the page.

Image & Video URLs

All embedded content (e.g. images and videos) must use the secure HTTPS protocol, or users will receive an error.

https://example.com/image.gif

Note: This does NOT apply to page/site links. Just visit the page and copy the URL from the browser.

Images

If an image is larger than it’s parent container, it will scale down proportionately unless dimensions are defined inline with width, height or style.

Unfortunately the CMS adds width and height for inserted images. So, if you want the image to scale, for example on mobile devices, then you’ll need to edit the HTML and remove the width and height.