Introduction

OCI Project is a website for funeral homes and agents to sell preneed contracts to people online. This is a wizard type website, that walks guest step by step, to owning a preneed contract.

Authors:

Designer: Anna Robbins

Developer: Matt Hastings

Dev URLs:

http://www.mytributeplanner.com/landing/*funeralhome*/*agent*

https://www.mytributeplanner.com/landing/YellowRose/Pre-Need

Test URLs:

https://tst.mytributeplanner.com/landing/ArizonaAffordable/FD

https://tst.mytributeplanner.com/landing/Nalley-PickleWelch(BigSpring)/DSelf



Sandbox

Check out these examples of our Online Contracts Design System in use.

Class Naming

Code style standards for CSS and Sass: All class names should follow the BEM and Namespacing rules below. Also the class should describe the content, not what the element looks like.

BEM - Block Element Modifier

Learn more about BEM here - http://getbem.com

Block: The sole root of the component. ex: .room { }
Element: A component part of the Block. ex: .room__door { }
Modifier: A variant or extension of the Block. ex: .room--kitchen { }

HTML/CSS EXAMPLE:

              
      <form class="c-form c-form--theme-xmas c-form--simple">
        <input class="c-form__input" type="text" />
        <input class="c-form__submit c-form__submit--primary" type="submit" />
      </form>

      .c-form { }
      .c-form--theme-xmas { }
      .c-form--simple { }
      .c-form__input { }
      .c-form__submit { }
      .c-form__submit--primary
            

Namespacing

Type Prefix Example Description
Component c- .c-btn
.c-form
Form the backbone of an application and contain all of the cosmetics for a standalone component.
Layout l- .l-page
.l-container
These modules have no cosmetics and are purely used to position .c- components and structure an application's layout.
Helpers h- .h-show
.h-hide
These utility classes have a single function, often using !important to boost their specificity. (Commonly used for positioning or visibility.)
States is- has- .is-visible
.has-loaded
Indicate different states that a c- component can have.
Javascript Hook js- .js-tab-switcher These indicate that JavaScript behavior is attached to a component. No styles should ever be associated with them; they are purely used to enable easier manipulation with script.
Selenium Testing bm- .bm-switch
.bm-button
This is for Mattman's Testing.

Colors

Color is used in a meaningful way to express emotions and tone, and promotes a distinct and consistent look and feel throughout all applications.

Brand

Variable Default Value Role Color
$ui-background #EFECE8 Default page background

$brand-primary #155762 Primary interactive color
Primary Buttons

$brand-secondary #C3D2D2 Secondary interactive color
Secondary Buttons

$brand-tertiary #C07243 Tertiary interactive color
Tertiary Buttons

UI

Variable Default Value Role Color
$ui-01 #fff Primary Container Background

$ui-02 #1B3337 Emphasis Elements

$ui-success #3caea3 Success

$ui-warning #bca136 Warning

$ui-error #ed553b Error

$ui-notice #20639b Notice

$ui-info #777777 Information

Fonts

Variable Default Value Role Color
$font-01 $ui-01 Light Font Color
Primary & Tertiary Buttons

$font-02 $ui-02 Dark Font Color
Secondary & Ghost Buttons
Body Copy

$font-03 $brand-primary Primary Heading Color Option

$font-04 $brand-tertiary Secondary Heading Color Option

Icons are used throughout the UI to save space, allow for visual clarity and focus.

Icons can be added via an <i> element like so: <i class="icon icon--{name}"></i>

Sizes

              

Colors

              

Number Icons

1 5 7 13
              

Available Icons

icon--hamburger

icon--exit

icon-edit

icon--help

icon--play

icon--check

icon--up

icon--down

icon--search

icon--checked

Icons with Preset Styles

The classes .icon--primary, .icon--secondary, and .icon--tertiary should not be used on these icons.

icon--info

icon--success

icon-warning

icon--error

icon--notice

Modifiers

Class Add to Element Description
icon--sm icon Sets the icon to 16px width and 16px height
icon--md icon Sets the icon to 24px width and 24px height
icon--lg icon Sets the icon to 48px width and 48px height
icon--xl icon Sets the icon to 64px width and 64px height
icon--primary icon Sets the icon stroke color to $brand-primary
icon--secondary icon Sets the icon stroke color to $brand-tertiary
icon--tertiary icon Sets the icon stroke color to $ui-01. This should only be used when the icon is on a dark background.

Variables

Variable Default Value Description
$icon-default 32px The default height and width of an icon.
$icon-small 16px The height and width of a small icon.
$icon-medium 24px The height and width of a medium icon.
$icon-large 48px The height and width of a large icon.
$icon-xlarge 64px The height and width of an extra large icon.
$icon-default-color $ui-02 The default stroke color of an icon.
$icon-primary-color $brand-primary The stroke color of an icon with class .icon--primary
$icon-secondary-color $brand-tertiary The stroke color of an icon with class .icon--secondary
$icon-tertiary-color $ui-01 The stroke color of an icon with class .icon--tertiary
$icon-stroke-width 5 The stroke width of all icons.

Typography can help create clear hierarchies, organize information, and guide users through a product or experience.

Typography

XL Heading

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H5 Heading - optional color
H5 Heading - optional color

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

                

Modifiers

Class Value Description
c-block display:block Use this on any typography that should take up 100% width of the page.
c-italic font-style: italic Only use this on paragraph-01 and paragraph-sm.
font-03 color: $font-03 Use this on any heading or paragraph.
font-04 color: $font-04 Only use this on headings.
font-05 color: $ui-01 White out font color. Only use on elements with dark backgrounds.
font-06 color: $brand-primary Only use this on paragraphs.

Variables

Variable Default Value Description
$font-family-text 'Lora', serif Default font family for text copy
$font-family-display 'Montserrat', sans-serif Default font family for display copy
$font-family-body 'Lora', serif Default font family for body copy
$font-weight-normal normal Normal font weight
$font-weight-bold 600 Bold font weight
$letter-spacing-none 0 Removes all letter spacing
$letter-spacing-small 0.5px Small letter spacing
$letter-spacing-large 1px Large letter spacing
$hxl-color $font-03 HXL font color
$h1-color $font-03 H1 font color
$h2-color $font-03 H2 font color
$h3-color $font-03 H3 font color
$h4-color $font-03 H4 font color
$h5-color $font-03 H5 font color
$p-color $font-02 Paragraph font color
$psm-color $font-02 Paragraph small font color
$hxl-text-transform none HXL text transform
$h1-text-transform none H1 text transform
$h2-text-transform uppercase H2 text transform
$h3-text-transform none H3 text transform
$h4-text-transform uppercase H4 text transform
$h5-text-transform uppercase H5 text transform
$p-text-transform none Paragraph text transform
$psm-text-transform none Paragraph small text transform
$p-line-height 30px Paragraph line height
$psm-line-height 20px Paragraph small line height

Fluid Typography

The typography will scale the font-size from the minimum font size (at 320px viewport) to the maximum font size (at a 2000px viewport) automatically.

Example: At 320px viewport a .heading-xl will be font-size: 18px. The font will grow as the viewport does. Until the viewport reaches 2000px, when the font-size will reach its maximum at 48px.

Variable Default Value Description
$hxl-max-size 48px The maximum font size for a .heading-xl
$h1-max-size 36px The maximum font size for a .heading-01
$h2-max-size 24px The maximum font size for a .heading-02
$h3-max-size 20px The maximum font size for a .heading-03
$h4-max-size 18px The maximum font size for a .heading-04
$h5-max-size 16px The maximum font size for a .heading-05
$p-max-size 16px The maximum font size for a .paragraph-01
$psm-max-size 14px The maximum font size for a .paragraph-sm
$hxl-min-size 18px The minimum font size for a .heading-xl
$h1-min-size 18px The minimum font size for a .heading-01
$h2-min-size 18px The minimum font size for a .heading-02
$h3-min-size 16px The minimum font size for a .heading-03
$h4-min-size 14px The minimum font size for a .heading-04
$h5-min-size 12px The minimum font size for a .heading-05
$p-min-size 13px The minimum font size for a .paragraph-01
$psm-min-size 12px The minimum font size for a .paragraph-sm

Breakpoints

There are five main breakpoints for screen sizes, below you can see the variable, default width and device examples at which the content will scale.

Variable Default Value Device Example
$break-xsmall 0px Mobile
$break-small 640px Mobile
$break-medium 1024px Tablet
$break-large 1200px Desktop
$break-xlarge 1440px Large Desktop

Spacing

There are numerous spacing variables across the codebase in order to ensure consistency in spacing between components.

Variable Default Value Example Description
$space-none 0 Sets space to 0
$space-xsmall 5px
Sets space to extra small
$space-small 10px
Sets space to small
$space-medium 20px
Sets space to medium
$space-large 40px
Sets space to large
$space-xlarge 100px
Sets space to extra large

Animations

A cross matrix of duration and easing that can be used to apply animation to components.

Variable Default Value Description
$transition all .3s ease-in-out Animates with ease in and out motion at .3 seconds
$transition-slow all .5s ease-in-out Animates with ease in and out motion at .5 seconds

Line Break

                
Variable Default Value Description
$center-line-space $space-large Margins above and below the center line
$center-line-space-small $space-medium Margins above and below the small center line

Depth

Variable Default Value Example Description
$box-shadow-large 0 10px 20px rgba(0,0,0,0.1)
Large box shadow
$box-shadow-small 0 3px 6px rgba(0,0,0,0.1)
Small box shadow

Borders

Variable Default Value Description
$border-default 1px solid $brand-secondary
Default Border Style
$border-highlight 1px solid $brand-tertiary
Highlighted Border Style

This is the master layout which provides the foundation for all page templates.

Page Layout

.l-page__header

.l-page__main

.l-page__footer

                

Variables

Variable Default Value Description
$page-border $space-large Space around the entire page
$page-background-color $ui-background Background color, Color of the space around the page
$page-foreground-shadow $box-shadow-large Drop shadow on entire page
$page-default-text-align center Default text align on the site

The .l-page__header containers the left side panel, the company logo, the navigation, and the right side panel.

Header Layout

menu
              

Left Panel

                

Right Panel

Variables

Variable Default Value Description
$header-navigation-space 25% Space on the left and right of the header, designated for the menu and the navigation items
$header-background-color $ui-01 Background color of the header
$header-height 50px Height of the header
$header-padding $space-medium Top, right, bottom and left padding of the header
$header-logo-max-height 40px Maximum height of the logo
$header-tablet-padding $space-small Top, right, bottom and left padding on the tablet header
$header-tablet-logo-max-height 30px Maximum height of the mobile logo
$header-phone-height 50px Height of the mobile header

Left Panel

$left-panel-width 330px Width of the left panel
$left-panel-height 100% Height of the left panel
$left-panel-button-size 50px Height and Width of the left panel trigger
$left-panel-background $ui-01 Background color of the left panel
$left-panel-shadow $box-shadow-large Box shadow of the left panel
$left-panel-transition $transition-slow Animation transition of the left panel
$left-panel-header-color $brand-primary Background color of the left panel header
$left-panel-header-size 40px Height of the left panel header. This needs a set height so the left panel content has a height of when to add a scroll bar
$left-panel-header-padding $space-medium Right, bottom, and left padding of the left panel header
$left-panel-header-padding-top $space-large Top padding fo the left panel header
$left-panel-content-background rgba($brand-primary, 0.1) Background color of the left panel header content
$left-panel-content-padding $space-medium Top, right, bottom and left padding of the left panel content

Right Panel

$right-panel-width 330px Width of the right panel
$right-panel-height 100% Height of the right panel
$right-panel-background $ui-01 Background color of the right panel
$right-panel-shadow $box-shadow-large Box shadow of the right panel
$right-panel-transition $transition-slow Animation transition of the right panel
$right-panel-header-color $brand-primary Background color of the right panel header
$right-panel-header-size 40px Height of the right panel header. This needs a set height so the right panel content has a height of when to add a scroll bar
$right-panel-header-padding $space-medium Right, bottom and left padding of the right panel header
$right-panel-header-padding-top $space-large Top padding fo the right panel header
$right-panel-content-background rgba($brand-primary, 0.1) Background color of the right panel content
$right-panel-content-padding $space-medium Top, right, bottom and left padding of the right panel content

Section

The section is a page-level structure container used to divide a page into stacked sections with appropriate padding applied. These should be used to separate large groups of content on a page.

Section Layout

Please make sure the first l-section on the page has an additional class of l-section--primary or l-section--secondary. This way the white section is not next to the white header.

.l-section

.l-section--primary

.l-section--secondary

                

Variables

Variable Default Value Description
$section-padding $space-xlarge Top and bottom padding of a section
$section-mobile-padding $space-large Top and bottom padding of a section in mobile
$section-primary-background rgba($brand-secondary, 0.1) Background color of a primary section
$section-secondary-background rgba($brand-primary, 0.1) Background color of a secondary section
$section-max-width 1000px Maximum width of the content inside the section
$section-tablet-max-width 500px Maximum width of the content inside the section on tablet size screens

Footer

The footer contains buttons to guide the user through the wizard portion of the site. Not every page will have a footer.

Footer Layout

The footer is sticky fixed, to the bottom of the screen, until you get to the bottom of the page. Then it will move on scroll, with the bottom of the .l-page__main.

                
              

Variables

Variable Default Value Description
$footer-background-color $ui-01 Background color of the footer
$footer-padding $space-medium Top, right, bottom and left padding of the footer
$footer-mobile-padding $space-small Top, right, bottom and left padding of the footer on mobile

Grid is used when you want to display multiple components in one row. It has no preset styles.

Grid Basic Layout

By default, the l-grid and l-grid__container will span the full width of the container it is in.

Column 1

Column 2

                

Grid

Below are the available classes to add to .l-grid to turn the .l-grid__containers inside to even width columns.

Column 1

Column 2

Column 1

Column 2

Column 3

Column 1

Column 2

Column 3

Column 4

                

Grid Containers

Below are the available classes to add to .l-grid__container to turn them into specific width columns.

Please do not use both Grid Modifiers and Container Modifiers. One or the other.

12col

1col

11col

2col

10col

3col

9col

4col

8col

5col

7col

6col

6col

2col

6col

4col

                

Grid Auto

Add l-grid--auto to the l-grid to evenly space out the containers inside.

Column 1

Column 2

Column 3

Column 4

Column 5

                

Align Content

The content inside the grid container can be aligned with classes added to .l-grid__container.

Horizontal Align

Default - Left

l-grid--align-center

l-grid--align-right

Vertical Align

Default - Top

l-grid--align-middle

l-grid--align-bottom

                

Modifiers

Class Add to Element Description
l-grid--auto l-grid Turns the child elements into even sized columns
l-grid--2col l-grid Turns the child elements into 2 even sized columns
l-grid--3col l-grid Turns the child elements into 3 even sized columns
l-grid--4col l-grid Turns the child elements into 4 even sized columns
l-grid--1col l-grid__container Turns the l-grid__container into a column 1/12 wide of the parent element
l-grid--2col l-grid__container Turns the l-grid__container into a column 2/12 wide of the parent element
l-grid--3col l-grid__container Turns the l-grid__container into a column 3/12 wide of the parent element
l-grid--4col l-grid__container Turns the l-grid__container into a column 4/12 wide of the parent element
l-grid--5col l-grid__container Turns the l-grid__container into a column 5/12 wide of the parent element
l-grid--6col l-grid__container Turns the l-grid__container into a column 6/12 wide of the parent element
l-grid--7col l-grid__container Turns the l-grid__container into a column 7/12 wide of the parent element
l-grid--8col l-grid__container Turns the l-grid__container into a column 8/12 wide of the parent element
l-grid--9col l-grid__container Turns the l-grid__container into a column 9/12 wide of the parent element
l-grid--10col l-grid__container Turns the l-grid__container into a column 10/12 wide of the parent element
l-grid--11col l-grid__container Turns the l-grid__container into a column 11/12 wide of the parent element
l-grid--12col l-grid__container Turns the l-grid__container into a column 12/12 wide of the parent element
l-grid--align-center l-grid, l-grid__container Align the content in the center of the grid horizontally
l-grid--align-right l-grid, l-grid__container Align the content on the right of the grid horizontally
l-grid--align-middle l-grid, l-grid__container Align the content in the middle of the grid vertically
l-grid--align-bottom l-grid, l-grid__container Align the content on the bottom of the grid vertically

Variables

Variable Default Value Description
$grid-col-margin $space-medium Space between each grid column and row

Alerts provide messages within the application that are color coded to emphazise the level of urgency.

Default

This alert provides information that is useful and relevant, but not critical.

Default Message

Etiam eget velit dapibus, semper augue eget, porttitor diam.

                

Success

Add the modifier class c-alert--success for success alert.

Success Message

Etiam eget velit dapibus, semper augue eget, porttitor diam.

                

Warning

Add the modifier class c-alert--warning for warning alert.

Warning Message

Etiam eget velit dapibus, semper augue eget, porttitor diam.

                

Error

Add the modifier class c-alert--error for error alert.

Error Message

Etiam eget velit dapibus, semper augue eget, porttitor diam.

                

Notice

Add the modifier class c-alert--notice for notice alert.

Notice Message

Etiam eget velit dapibus, semper augue eget, porttitor diam.

                

Variables

Variable Default Value Description
$alert-border $border-default Border around the entire alert
$alert-space $space-medium Space below the alert and between the icons and content
$alert-padding $space-small Space between the alert border and content
$alert-text-align left Lext align of the alert
$alert-background $ui-01 Background color of alert
$alert-heading-margins $space-xsmall 0 0 0 Top margin of the alert heading
$alert-border-bottom-size 2px Border size of the bottom border
$alert-default-color $ui-info Default Alert Color
$alert-success-color $ui-success Success Alert Color
$alert-warning-color $ui-warning Warning Alert Color
$alert-error-color $ui-error Error Alert Color
$alert-notice-color $ui-notice Notice Alert Color

Buttons allow users to perform actions.

Primary

Add class c-btn--sm to any button to make it smaller.



                

Secondary

Add class c-btn--sm to any button to make it smaller.



                

Tertiary

Add class c-btn--sm to any button to make it smaller.



                

Ghost

Add class c-btn--sm to any button to make it smaller.



                

Variables

Variable Default Value Description
$btn-font $font-family-display Button font family
$btn-font-weight $font-weight-bold Button font weight
$btn-letter-spacing $letter-spacing-large Letter spacing of buttons
$btn-padding $space-none Padding of the button
$btn-line-height 60px Line height of the button
$btn-border-radius 0 Border Radius of button
$btn-width 280px Button width - not including padding
$btn-transition $transition Transition animation when the button is hovered over
$btn-disabled-opacity 0.5 Opacity of the button when it is disabled
$btn-small-line-height 50px Line height of a small button
$btn-small-width 150px Width of a mobile button
$tablet-btn-line-height 50px Line height on a button on a tablet
$tablet-btn-width 200px Width of a button on a tablet
$mobile-btn-line-height 40px Line height on a button on mobile
$mobile-btn-width 140px Width of a button on mobile
$mobile-btn-small-line-height 40px Line height of a small button on mobile
$mobile-btn-small-width 100px Width of a small button on mobile

A form enables users to submit information to a web server.

Form

Wrap each form with a form tag that includes the class c-form, an action and a method.

                      
    <form class="c-form" method="get" action=" ">
      
    </form>
                

Form Field Group

Use a field group to pair a form control (such as an input) with a label and include other elements such as a helper link or error messages.

Default

2 column

2 column

3 column

3 column

3 column

4 column

4 column

4 column

4 column

                

Input

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.

                  

Input with placeholder

Placeholder text provides hints or examples of what to enter. This should not be crucial information, it disappears after the user begins to type.

Don't use the placeholder attribute as a substitute for a label. It's a misuse of the attribute and leaves you with an inaccessible, unlabeled field.

                

Number Input

                

Drag & Drop File Uploader

Drag & Drop Files Here

OR

Supported Files: JPG, & PDF

                

Selectable

                

Selectable Button Included

Add class c-selectable__label--button to each c-selectable__label to give them a Select/Selected button.

                

Radio Buttons

Radios are used when only one choice may be selected in a series of options.

Please don't forget to add the div .c-form__radio around all the radio labels, inside the .c-form__field-group

                

Checkbox

Checkboxes are used to provide users with multiple options for selection in a series of options.

                

Select

The select allows the user to select an option from a predetermined list.

                

Helper Link

The select allows the user to select an option from a predetermined list.

Errors

Errors are visual cues to guide the user as to where the problem lies within the form. This will help to easily identify the elements that need to be corrected.

* This is a required field.
* This is a required field.

Variables

Variable Default Value Description
$form-grid-spacing $space-medium Space between inputs if multiple on one row
$form-grid-row-spacing $space-medium Bottom margin of form row
$form-padding-bottom $space-large Padding on the bottom of a form
$form-padding-mobile $space-medium Padding on the bottom of a form on mobile
$form-border-default $border-default Default border for all form elements
$form-border-highlight $border-highlight Highlight border for all form elements
$form-font-family-text $font-family-text Text font for all form elements
$form-font-family-display $font-family-display Display font for all form elements
$form-input-height 50px Height of Inputs, Selects, Checkboxes, and Radios
$form-input-padding $space-none $space-medium Inside padding for Inputs, Checkboxes, and Radio Buttons
$form-input-background rgba($brand-secondary, 0.1) Background color for Inputs & Selects
$form-input-font-size 16px Font size for Inputs & Selects
$form-input-color $font-02 Font color for Inputs & Selects
$form-input-letter-spacing $letter-spacing-small Letter Spacing for Inputs & Selects
$form-element-size 18px The size of Checkboxes and Radio Buttons
$form-element-background $ui-01 Background Color for Checkbox and Radios
$form-element-hover-background $brand-secondary Background color for Checkbox and Radios on hover
$form-element-inner-border inset 0 0 0 3px $ui-01 Second border on the Checkbox and Radio Buttons when hovered and selected
$form-element-checked-background $brand-tertiary Background color for selected checkbox and radio.
$label-font $form-font-family-display Label font family
$label-size 14px Label font size
$label-weight $font-weight-bold Label font weight
$label-letter-spacing $form-input-letter-spacing Label letter spacing
$label-text-transform uppercase Label text transform
$label-margin-top $space-medium Label margin top
$label-margin-bottom $space-small Label margin bottom
$label-color $brand-primary Label color
$helper-font-family $form-font-family-text Helper link font family
$helper-color $brand-tertiary Helper link color
$helper-font-size 14px Helper link font size
$helper-margin-top $space-xsmall Helper link margin top
$placeholder-color $brand-primary Placeholder font color
$placeholder-opacity 0.5 Placeholder font opacity
$selectable-max-width 240px Selectable Item Maximum Width
$selectable-box-shadow inset 0 0 0 1px $brand-tertiary, $box-shadow-large Selectable Item Box Shadow and Highlight Border
$selectable-button-background $brand-secondary Selectable Item with Button - Button Default Background Color
$selectable-button-color $brand-primary Selectable Item with Button - Button Default Font Color
$selectable-button-active-background $brand-tertiary Selectable Item with Button - Button Active Background Color
$selectable-button-active-color $ui-01 Selectable Item with Button - Button Active Font Color

Use the image component to display an image in your product. Only use images if there’s a real user need.

Images

Always provide alt text for your users, unless the image is purely decorative, in which case the alt text should be an empty string ("") to hide it from screen readers.

                

Size and Shape

Images will span with width of the container they are in unless you specify a set pixel size with class c-image--*height*x*width*. If a size is specified, the image will fill the space of the div, and align in the center by default.

Square

height: 100px
width: 200px

Round

height: 100px
width: 300px

Circle

height: 100px
width: 100px

                

Image Gallery

The thumbnails will be automatically generated with javascript.

                
              

Modifiers

Class Add to Element Description
c-image--square c-image To show a square/rectangle image with no curve to the edge
c-image--round c-image To show an image with slightly rounded edges
c-image--circle c-image To show a circle image. Make sure the height and width are the same number. ex. c-image--100x100
c-image--*height*x*width* c-image To give the image a set size, put the height in pixels first then the width in pixels.

Variables

Variable Default Value Description
$image-round-border-radius 10px Border radius of a rounded image
$gallery-thumbnail-margin $space-small $space-small 0 0 Margins on the image gallery thumbnails
$gallery-thumbnail-border-default 1px solid $ui-01 Default border on the image gallery thumbnails
$gallery-thumbnail-border-highlight $border-highlight Highlight border on the image gallery thumbnails

Links are used primarily as a navigational element.

Links

Avoid the term “click here,” other links to “here,” or the web address itself. Instead, use a meaningful descriptive label for the link, and match the destination site name.

Sizes

To make a link strong and stand out, add class c-link--strong. To make a link small add class c-link--sm.

With Icon

Learn more and view available icons in our Iconography section of this style guide.

Modifiers

Class Add to Element Description
c-link--inline c-link Make the link display inline to put it in the middle of a sentence
c-link--block c-link Make the link display block. This will make the like 100% of whatever container it is in
c-link--strong c-link Creates a bold, uppercase font on the link to make it stand out
c-link--sm c-link Gives the link a smaller font size.
c-link--icon c-link Gives proper spacing to a link where there is an icon next to text
c-link--dark c-link Adds a darker font color to the link
c-link--light c-link Adds a lighter font color to links. Only use when on top of a dark background
c-link--underline-switch c-link Removes the default underline to a link and adds it to when the link is hovered on

Variables

Variable Default Value Description
$link-default-font $font-family-text Default font of a link
$link-letter-spacing $letter-spacing-small Letter spacing of a link
$link-color $brand-tertiary Default color of a link
$link-strong-font $font-family-display Strong link font family
$link-strong-font-weight $font-weight-bold Strong link font weight
$link-strong-letter-spacing $letter-spacing-large Strong link letter spacing
$link-dark-color $font-02 Dark link font color

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.

Default

                

Small

Add class c-modal--small to c-modal to make a smaller modal dialog.

Please Confirm

Are you sure you want to remove Marble Outer Container from your add-ons?

                

Variables

Variable Default Value Description
$modal-overlay-background rgba($brand-primary,0.2) Background color of the page overlay when a modal is active
$modal-margin $space-medium Top and Bottom margin of modal
$modal-max-width 988px Max width of the modal not including box shadow or border
$modal-background $ui-01 Modal background color
$modal-padding $space-medium Padding between modal content and border/box shadow
$modal-box-shadow 0 0 0 6px $ui-01 Modal Box Shadow
$modal-border 1px solid $brand-tertiary Modal Border

A progress bar is a simple visual to show the user they are making progress through a process on the site.

Progress Bar

The number at the end of c-progress-- decides how much of the progress bar is filled in. See the Progress Table below for the number that goes on each page of the OCI wizard process.

                

Complete Timeline

Timeline on the last page, showing the user what is going to happen next in their contact lifespan.

4/9/2019

Contract Transmitted

5-10 Business Days

Contract Processed & Finalized

6-8 Weeks

First Payment Processed

                

Progress Table

Please do not change the bold sizes below, these are important checkpoints.

If you create a page please add it to the table below and number sizes accordingly. Always making forward progress.

The phone size progress numbers are automatic. No need to do anything with these.

Page Percentage Phone
Name 4 1 of 5
Yourself or Others 6 1 of 5
Others Form 8 1 of 5
How are you feeling 10 1 of 5
Resources 12 1 of 5
Services to Honor 16 1 of 5
Body Present 18 1 of 5
Multiple Opportunities 20 1 of 5
Select a Package 22 2 of 5
Package Details 24 2 of 5
Name Plan/Create Account 26 2 of 5
Customize Step 1 30 2 of 5
Customize Step 2 32 2 of 5
Customize Step 3 34 2 of 5
Customize Step 4 36 2 of 5
Customize Step 5 38 2 of 5
1st Review 40 2 of 5
More About Yourself 45 3 of 5
More About Debra 47 3 of 5
Excess Funds 50 3 of 5
Excess Funds Other 52 3 of 5
Revocable/Irrevocable 56 3 of 5
Texas Brochure 58 3 of 5
2nd Review 60 3 of 5
Who will be paying? 65 4 of 5
Other 68 4 of 5
Payment Plan 70 4 of 5
Bank Draft/Credit Card 75 4 of 5
3rd Review 80 4 of 5
Contract 85 5 of 5
Signatures 90 5 of 5
Complete 100 5 of 5

Variables

Variable Default Value Description
$progress-bar-height 2px Height of the progress bar
$progress-bar-background $ui-01 Background oclor of the progress bar
$progress-bar-color $brand-tertiary Foreground color of the progress bar (the filled in part)
$progress-phone-font-family $font-family-display Font Family of the progress bar on mobile size screens (1 of 5)
$progress-phone-font-weight $font-weight-bold Font weight of the progress bar on mobile size screens (1 of 5)
$progress-phone-font-color $brand-primary Font color of the progress bar on mobile size screens (1 of 5)

Task List

Task lists help users understand the tasks involved in completing a transaction, the order they should complete tasks in, or when they have completed tasks.

Default


Survey

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id eleifend nulla. Praesent et egestas velit.

Sign Contract

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id eleifend nulla. Praesent et egestas velit.



                

Variables

Variable Default Value Description
$link-default-font $font-family-text Default font of a link

Tiles are a highly flexible component for displaying a wide variety of content. Tiles have no pre-set styles for the content within them. You can customize tiles to fit your specific use case.

Default

                

Styled

Add class c-tile--styled to remove the border and add a dropshadow for some depth on the page.

                

Overlapping

Add class c-tile--overlap to overlap the section below the tile. Add class c-overlapped to the section or div below the parent div of the .c-tile--overlap. See the example below.

Content above the Tile

Content in the Tile

Content in the Next Div

                

Variables

Variable Default Value Description
$tile-border $border-default Border on a tile
$tile-background $ui-01 Background color of a tile
$tile-padding $space-medium Top, right, bottom and left padding on a tile
$tile-box-shadow $box-shadow-large Box shadow of a styled tile
$tile-small-box-shadow $box-shadow-small Box shadow of a mobile size styled tile