Components

Components = Custom elements/modules

Component styles have been further sub-divided and categorized as follow:

  • "Modules" = general components which can be reused throughout most pages. For example, buttons.
  • "Templates" = components that make up overall shared page structures including navigation and the page footer.

Note: SoFi icons have also been separated out from other components into a sub-folder for ease of reference and updating. (The majority of individual icon styles are generated by Fontello.)

Alerts

Alerts - General

These are used for general informational messages or error messages. They often appear as a result of a user action such as after a form is submitted. Their widths are confined to content areas they appear within.

Danger alert

Caution alert

Info alert

Success alert

<div class="alert alert--danger">
    <p>Danger alert</p>
</div>

<div class="alert alert--caution">
    <p>Caution alert</p>
</div>

<div class="alert alert--info">
    <p>Info alert</p>
</div>

<div class="alert alert--success">
    <p>Success alert</p>
</div>

Alert Banners

These appear on the Wealth Account Dashboard page. They stretch across the full width of the screen and are used to inform users of important actions they should take or to notify them of important information.

(Info Alert Banner) Congratulations on your new SoFi Wealth account! Add Funds.

(Danger Alert Banner) Additional documentation is required for your account. Upload Documents.

(Caution Alert Banner) Less serious than "Danger" but still requires attention.

(Success Alert Banner) Profile Saved!

<div class="alert-banner alert-banner--info">
  <button type="button" class="alert-banner__close">
    <svg class="svg-icon svg-icon--xs" arial-label="Close">
        <use xlink:href="#close-x">
    </svg>
  </button>

  <p>
    (Info Alert Banner) Congratulations on your new SoFi Wealth account! <a href="/blah.html">Add Funds.</a>
  </p>
</div>

<div class="alert-banner alert-banner--danger">
  <button type="button" class="alert-banner__close">
    <svg class="svg-icon svg-icon--xs" arial-label="Close">
        <use xlink:href="#close-x">
    </svg>
  </button>

  <p>
    (Danger Alert Banner) Additional documentation is required for your account. <a href="/blah.html">Upload Documents.</a>
  </p>
</div>

<div class="alert-banner alert-banner--caution">
  <button type="button" class="alert-banner__close">
    <svg class="svg-icon svg-icon--xs" arial-label="Close">
        <use xlink:href="#close-x">
    </svg>
  </button>

  <p>
    (Caution Alert Banner) Less serious than "Danger" but still requires attention.
  </p>
</div>

<div class="alert-banner alert-banner--success">
  <button type="button" class="alert-banner__close">
    <svg class="svg-icon svg-icon--xs" arial-label="Close">
        <use xlink:href="#close-x">
    </svg>
  </button>

  <p>
    (Success Alert Banner) Profile Saved!
  </p>
</div>

Boxes

"Boxes" are containers for visually grouping and containing various types of content. Also can be referred to as "cards" or "containers".

Basic Boxes

This is a basic white box. It can have any kind of content. It is normally used on pages with a light grey background. A grey outline has been added to this example just to make the edges of the box visible.

This is a link within a box.


This is a box. It can have any kind of content.

This is a link within a box.


This is a box. It can have any kind of content.

This is a link within a box.


This is a box. It can have any kind of content.

This is a link within a box.


This is a disclaimer box. It can have any kind of content but is meant for displaying disclaimer messages.

This is a link within a box.

<div class="white-box" style="border: 1px solid #D1D2D4;">
  <p>This is a basic white box. It can have any kind of content. It is normally used on pages with a light grey background. A grey outline has been added to this example just to make the edges of the box visible.</p>
  <p>This is <a href="/blah.html">a link</a> within a box.</p>
</div>

<hr>

<div class="accent-blue-box">
  <p>This is a box. It can have any kind of content.</p>
  <p>This is <a href="/blah.html">a link</a> within a box.</p>
</div>

<hr>

<div class="highlight-box">
  <p>This is a box. It can have any kind of content.</p>
  <p>This is <a href="/blah.html">a link</a> within a box.</p>
</div>

<hr>

<div class="subtle-highlight-box">
  <p>This is a box. It can have any kind of content.</p>
  <p>This is <a href="/blah.html">a link</a> within a box.</p>
</div>

<hr>

<div class="disclaimer-box">
  <p>This is a <strong>disclaimer box</strong>. It can have any kind of content but is meant for displaying disclaimer messages.</p>
  <p>This is <a href="/blah.html">a link</a> within a box.</p>
</div>

Progress Box

TODO: Originally this box was used to only contain progress indicator lists but seems to be used for other types of content in some WIP designs so we should consider redefining and renaming it...

(NOTE: This box along with the "progress-list" was replaced in Wealth with a new progress bar design. Not sure if it will be changed in other apps also.)

SoFi Wealth

  1. Create Account
  2. Complete Your Profile
  3. Review Terms of Service
  4. Add Funds
<div style="padding: 1em; background: #f5f5f6">

<section class="progress-box content-section">
    <header class="progress-box__header">
        <h4>SoFi Wealth</h4>
    </header>

    <div class="progress-box__body">
        <ol class="progress-list">
            <li class="complete">Create Account</li>
            <li class="current">Complete Your Profile</li>
            <li>Review Terms of Service</li>
            <li>Add Funds</li>
        </ol>
    </div>
</section>

</div>

Wide Box

So far this is being used in wide left side columns on two column pages. It initially was used mainly for form content so was originally based on form fieldset and legend tags but newer mocks show it being used for other types of content so it's been refactored.

We may want to come up with better naming as usage patterns become clearer.

Box Header

Content goes in here...
<div style="padding: 1em; background: #f5f5f6">

<section class="wide-box content-section">
    <header class="wide-box__header">
        <h4>Box Header</h4>
    </header>

    <div class="wide-box__body">
        Content goes in here...
    </div>
</section>

</div>

Buttons

Accessible Buttons

Buttons vs. Links:

General Guidelines:

(NOTE: Ideally buttons should be styled visually as buttons, and links should be styled visually as links, not vice versa but that's not always practical in order to match visual mocks together with functionality requirements.)

• No href = Use a button element, style like a link if required.

<button type="button" class="link">Cancel</button>

• Has href = Use a link, style like a button if required.

<a href="blah.com" class="btn">Home</a>
WARNING: "...when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons." See MDN: Using the Button Role.

Single Buttons

Regular Size:

Disabled:

Small:

Tiny (limited use, mainly within table cells):

On grey background:

On dark background:

"Full" Size:
(has a max-width of 345px)

"Loading" state buttons:

<p>
Regular Size:<br>
  <button type="button" class="btn">Default button</button>
  <button type="button" class="btn btn--secondary">Secondary button</button>
</p>
<p>
Disabled:<br>
  <button type="button" class="btn" disabled>Default button</button>
  <button type="button" class="btn btn--secondary" disabled>Secondary button</button>
</p>
<p>
Small:<br>
  <button type="button" class="btn btn--small">Default Button</button>
  <button type="button" class="btn btn--secondary btn--small">Secondary button</button>
</p>

<p>
Tiny (limited use, mainly within table cells):<br>
  <button type="button" class="btn btn--tiny">Default button</button>
  <button type="button" class="btn btn--secondary btn--tiny">Secondary button</button>
</p>

<p style="padding: 1em; background: #f5f5f6">
  On grey background:<br>
  <button type="button" class="btn">Default button</button>
  <button type="button" class="btn btn--secondary">Secondary button</button>
  <button type="button" class="btn" disabled>Default button</button>
  <button type="button" class="btn btn--secondary" disabled>Secondary button</button>
</p>

<p class="u-dark-blue-background u-padding-equal">
  On dark background:<br>
  <button type="button" class="btn btn--inverse">Default button</button>
  <button type="button" class="btn btn--inverse-secondary">Secondary button</button>
  <button type="button" class="btn btn--inverse" disabled>Default button</button>
  <button type="button" class="btn btn--inverse-secondary" disabled>Secondary button</button>
</p>

<p>
  "Full" Size:<br>
  (has a max-width of 345px)<br>
  <button type="button" class="btn btn--full">Default button</button>
</p>
<p>
  "Loading" state buttons:<br>
  <button type="button" class="btn btn--loading">Default button</button>
  <button type="button" class="btn btn--secondary btn--loading">Secondary button</button>
</p>

Group Buttons

Button with Dropdown

NOTE: Any of the button styles can be used for button dropdowns.

Open Menu:

<div class="btn-group">
    <button type="button" class="btn btn--small">
        Download Report
    </button>

    <div class="dropdown dropdown--right" data-uib-dropdown>
        <button type="button" class="dropdown__control btn btn--small" data-uib-dropdown-toggle></a>

        <div class="dropdown__content" data-uib-dropdown-menu>
            <ul class="dropdown-list">
                <li>
                    <label class="input-wrapper">
                        <input type="checkbox" name="checkAll">
                        <strong>Select All</strong>
                    </label>
                </li>

                <li>
                    <label class="input-wrapper">
                        <input type="checkbox">
                        Text
                    </label>
                </li>
            </ul>
        </div>
    </div>
</div>

<p>Open Menu:</p>
<div class="btn-group">
    <button type="button" class="btn btn--small">
        Download Report
    </button>

    <div class="dropdown dropdown--right open" data-uib-dropdown>
        <button type="button" class="dropdown__control btn btn--small" data-uib-dropdown-toggle></button>

        <div class="dropdown__content" data-uib-dropdown-menu>
            <ul class="dropdown-list">
                <li>
                    <label class="input-wrapper">
                        <input type="checkbox" name="checkAll">
                        <strong>Select All</strong>
                    </label>
                </li>

                <li>
                    <label class="input-wrapper">
                        <input type="checkbox">
                        Text
                    </label>
                </li>
            </ul>
        </div>
    </div>
</div>


<!-- adding space so open menu example won't overlay sample code -->
<div style="height: 80px;"></div>

Toggle Button


<ul class="btn-group btn-group--toggle">
    <li>
        <input type="radio" name="toggle-1" value="yes" id="toggle-yes-1" checked>
        <label class="btn btn--small" for="toggle-yes-1">Yes</label>
    </li>
    <li>
        <input type="radio" name="toggle-1" value="no" id="toggle-no-1">
        <label class="btn btn--small" for="toggle-no-1">No</label>
    </li>
    <li>
        <input type="radio" name="toggle-1" value="maybe" id="toggle-maybe-1">
        <label class="btn btn--small" for="toggle-maybe-1">Maybe</label>
    </li>
</ul>

<hr>

<ul class="btn-group btn-group--toggle">
    <li>
        <input type="radio" name="toggle-2" value="yes" id="toggle-yes-2" checked>
        <label class="btn" for="toggle-yes-2">Yes</label>
    </li>
    <li>
        <input type="radio" name="toggle-2" value="no" id="toggle-no-2">
        <label class="btn" for="toggle-no-2">No</label>
    </li>
    <li>
        <input type="radio" name="toggle-2" value="maybe" id="toggle-maybe-2">
        <label class="btn" for="toggle-maybe-2">Maybe</label>
    </li>
</ul>

Forms

NOTE: Form element examples here do not include JavaScript so do not show animation of label flying up, etc. For examples of functionality, see the Wealth responsive web app. (Currently we don't have a solution for including JavaScript in the Living Style Guide.)

Optional "Classic" Form Styles for Internal Apps

To use "classic" form input styles (for internal apps) instead of the "Material Design" like styles (for public-facing apps) import "libraries/sofi-global/base/base_forms-classic" instead of "libraries/sofi-global/base/base" in your app's main style sheet.

Accessible Form Controls

Performing a Basic Accessibility Check Using Lighthouse:

https://developers.google.com/web/tools/lighthouse/

  1. Load page you are checking in Chrome desktop browser.
  2. Open dev tools and click "Audits" tab.
  3. Click "Perform an audit..." button. Check only "Accessibility". (Faster than checking all the Audits.)
  4. Did you get a score of 100? If not, update the failing items and test again. :)

NOTE: The Chrome Lighthouse tool is good for a basic accessibility check but you may also want to investigate other ways to enhance accessibility for your team's app or try other accessibility testing tools.

Accessible Form Controls 101

Form controls should either:

  • Have an associated label tag with a "for" attribute,
  • Be wrapped with a label tag and also contain text,
  • Use fieldset and legend tag to wrap groups of inputs with the same name (such as radio inputs),
  • Or else use appropriate ARIA and/or "role" attributes. (See: aria-labelledby, aria-label, grouping roles)

Buttons vs. Links:

See Accessible Buttons for examples of when to use buttons vs. links.

Simplified Example Code

Most Cases

Generally to make form controls accessible do either:

<label for="myText-input">Label</label>
<input id="myText-input" type="text">

Or:

<label>
    <input type="radio">
    Label Text
</label>
Special Cases

For cases which don't match above, you can use various ARIA or role attributes as in examples below...

No visible label:
(use: aria-label)

<input type="text" placeholder="Search" aria-label="Search Transactions">

Using the aria-label attribute will allow you to pass the Chrome Lighthouse accessibility test but there are other things you can do either instead of or in addition to adding an aria-label to better enhance usability.

Input wrapped by label with descriptive text outside:
(use: aria-labelledby with id)

<label class="md-radio-button">
    <input type="radio" aria-labelledby="someRadio-label">
    <span class="md-fake-input"></span>
</label>

<div id="someRadio-label">Text explaining radio button</div>

A group of closely related misc. form controls:
(use: role="group", aria-labelledby with id, aria-label)

<span class="label" id="date-label">Enter Date</span>

<span class="compound-input" role="group" aria-labelledby="date-label">
  <select aria-label="Month">
    <option value="" selected disabled>Month</option>
    <option>January</option>
  </select>

  <select aria-label="Day">
    <option value="" selected disabled>Day</option>
    <option>1</option>
  </select>

  <input type="text" placeholder="Year" aria-label="Year">
</span>

A group of radio button inputs:

<h3 id="radioButtonGroup-label">Text explaining radio buttons:</h3>

<ol role="radiogroup" aria-labelledby="radioButtonGroup-label">
  <li>
    <label>
      <input type="radio" aria-labelledby="radioButtonGroup-label">
      Label text for individual radio button
    </label>
  </li>

  <li>
    <label>
      <input type="radio" aria-labelledby="radioButtonGroup-label">
      Label text for individual radio button
    </label>
  </li>
</ol>

-OR-

<fieldset>
  <legend>Text explaining radio buttons:</legend>

  <ol role="radiogroup">
    <li>
      <label>
        <input type="radio">
        Label text for individual radio button
      </label>
    </li>

    <li>
      <label>
        <input type="radio">
        Label text for individual radio button
      </label>
    </li>
  </ol>
</fieldset>

A group of checkboxes should use role="group".

Basic Form Controls

Basic form controls and inputs based on native browser html form elements.

Checkbox and Radio Inputs

  1. Choose any or none of the following
  2. Make a choice
  3. Alternate, compact layout

<ol class="form-step-list" role="group">
  <li>
    <span class="label" id="checkboxes-label">Choose any or none of the following</span>

    <ul class="spaced-list" role="group" aria-labelledby="checkboxes-label">
      <li>
        <label class="md-checkbox">
          <input type="checkbox" aria-labelledby="checkboxes-label" checked>
          <span class="md-fake-input"></span>
          <span class="md-label-text">Red</span>
        </label>
      </li>

      <li>
        <label class="md-checkbox">
          <input type="checkbox" aria-labelledby="checkboxes-label">
          <span class="md-fake-input"></span>
          <span class="md-label-text">Blue</span>
        </label>
      </li>

      <li>
        <label class="md-checkbox">
          <input type="checkbox" aria-labelledby="checkboxes-label">
          <span class="md-fake-input"></span>
          <span class="md-label-text">Orange</span>
        </label>
      </li>
    </ul>
  </li>

  <li>
      <span class="label" id="choiceGroup-label">Make a choice</label>

      <ul class="spaced-list" role="radiogroup" aria-labelledby="choiceGroup-label">
        <li>
          <label class="md-radio-button">
            <input type="radio" name="choice" aria-labelledby="choiceGroup-label" checked>
            <span class="md-fake-input"></span>
            <span class="md-label-text">Yes</span>
          </label>
        </li>

        <li>
          <label class="md-radio-button">
            <input type="radio" name="choice" aria-labelledby="choiceGroup-label">
            <span class="md-fake-input"></span>
            <span class="md-label-text">No</span>
          </label>
        </li>
      </ul>
    </li>

    <li>
      <span class="label" id="compactRadioGroup-label">Alternate, compact layout</label>

      <p role="radiogroup" aria-labelledby="compactRadioGroup-label">
        <label class="md-radio-button">
          <input type="radio" name="choice2" aria-labelledby="compactRadioGroup-label" checked>
          <span class="md-fake-input"></span>
          <span class="md-label-text">Yes</span>
        </label>

        <label class="md-radio-button">
          <input type="radio" name="choice2" aria-labelledby="compactRadioGroup-label">
          <span class="md-fake-input"></span>
          <span class="md-label-text">No</span>
        </label>
      </p>
    </li>
</ol>

Selects

  1. Select multiple options
<ol class="form-step-list">
  <li>
    <label for="selectChoice-input">Select an option</label>
    <select id="selectChoice-input">
      <option value="" selected disabled>Default</option>
      <option>First choice</option>
      <option>Another choice</option>
      <option>One more</option>
    </select>
  </li>

  <li>
    <span class="label" id="group-label">Select multiple options</span>

    <span class="compound-input" role="group" aria-labelledby="group-label">
      <select aria-label="Month">
        <option value="" selected disabled>Month</option>
        <option>October</option>
      </select>

      <select aria-label="Day">
        <option value="" selected disabled>Day</option>
        <option>24</option>
      </select>

      <select aria-label="Year">
        <option value="" selected disabled>Year</option>
        <option>1984</option>
      </select>
    </span>
  </li>
</ol>

Textareas

<ol class="form-step-list">
  <li>
    <label for="myOpinion-input">Share your opinion.</label>
    <textarea placeholder="Enter some text" id="myOpinion-input"></textarea>
   </li>
</ol>

Text Input Fields

Basic text input fields (not within a form layout)

"MD" style form elements: Behavior for inputs (animated transitions between the states) has been simulated here using jQuery. In actual usage, behavior can be wired up using JS framework of your app (angular.js, etc.).

An empty text input:

A focused text input:

A filled text input:

A text input with an error:

  1. A field specific error!

A disabled text input:

<p>An empty text input:</p>
<ol class="form-step-list">
  <li class="md-input-container" data-input-focus-container>
      <label for="firstName-input">First Name</label>
      <input type="text" id="firstName-input" data-input-focus required>
  </li>
</ol>

<p>A focused text input:</p>
<ol class="form-step-list">
  <li class="md-input-container is-focused" data-input-focus-container>
      <label for="firstName2-input">First Name</label>
      <input type="text" id="firstName2-input" data-input-focus required>
  </li>
</ol>

<p>A filled text input:</p>
<ol class="form-step-list">
  <li class="md-input-container is-not-empty" data-input-focus-container>
      <label for=firstName3-input>First Name</label>
      <input type="text" value="Filled" id="firstName3-input" data-input-focus required>
  </li>
</ol>

<p>A text input with an error:</p>
<ol class="form-step-list">
  <li class="md-input-container is-not-empty" data-input-focus-container>
      <label for="firstName4-input">First Name</label>
      <input type="text" value="Filled" id="firstName4-input" data-input-focus required class="ng-invalid ng-touched">
      <p class="error">
         A field specific error!
      </p>
  </li>
</ol>

<p>A disabled text input:</p>
<ol class="form-step-list">
  <li class="md-input-container is-not-empty" data-input-focus-container>
      <label for="firstName5-input">First Name</label>
      <input type="text" value="Kanga" id="firstName5-input" data-input-focus required disabled>
  </li>
</ol>

Fancy Form Controls

Grouped form controls and specialized form controls that don't correspond exactly to native html elements.

Compound Inputs

Group 2 or more closely related form controls together on the same line. The total width of all elements added together equals 100% of available space.

  1. Enter Date
  2. Name
  3. 2047
<ol class="form-step-list">
  <li>
    <span class="label" id="date-label">Enter Date</span>

    <span class="compound-input" role="group" aria-labelledby="date-label">
      <select aria-label="Month">
        <option value="" selected disabled>Month</option>
        <option>October</option>
      </select>

      <select aria-label="Day">
        <option value="" selected disabled>Day</option>
        <option>24</option>
      </select>

      <input type="text" placeholder="Year" aria-label="Year">
    </span>
  </li>

  <li>
    <span class="label" id="fullName-label">Name</span>

    <span class="compound-input" role="group" aria-labelledby="fullName-label">
      <input type="text" placeholder="First" aria-label="First Name">

      <input type="text" placeholder="Last" aria-label="Last Name">
    </span>
  </li>

  <li>
    <label for="age-input">At what age do you want to retire?</label>

    <span class="compound-input">
        <input type="number" maxlength="3" id="age-input">
        <span>2047</span>
    </span>
  </li>
</ol>

Special Input Fields

"Fancy" Input Fields

  1. $
  2. %
  3. Calendar Input:
    (uses Bootstrap calendar widget)
<section class="wide-box content-section">
    <div class="wide-box__body">
        <ol class="form-step-list">
          <li>
            <label for="dollarAmount-input">Dollar Input:</label>
            <div class="fancy-input fancy-input--dollar">
              <span class="fancy-input__decorator">$</span>
              <input type="text" placeholder="0" id="dollarAmount-input">
            </div>
          </li>

          <li>
            <label for="percentAmount-input">
              Percentage Input:
              <small>(Add "fancy-input--percent" class to constrain width)</small>
            </label>
            <div class="fancy-input fancy-input--percent">
              <input type="text" maxlength="3" placeholder="0" id="percentAmount-input">
              <span class="fancy-input__decorator">%</span>
            </div>
          </li>

          <li>
            <label for="fancySearch-input">Search Input:</label>

            <div class="fancy-input fancy-input--search">
              <span class="fancy-input__decorator">
                <svg aria-label="Search" class="svg-icon svg-icon--xs">
                    <use xlink:href="#search">
                </svg>
              </span>

              <input type="text" placeholder="Search" id="fancySearch-input">
            </div>
          </li>

          <li class="md-input-container">Calendar Input:<br>
            (uses Bootstrap calendar widget)<br>
            <label for="transferDate-input">Enter Transfer Date</label>

            <div class="fancy-input fancy-input--calendar">
              <input type="text" id="transferDate-input">

              <a class="fancy-input__decorator">
                <svg aria-label="Open calendar" class="svg-icon svg-icon--xs">
                    <use xlink:href="#calendar">
                </svg>
              </a>
            </div>
          </li>
        </ol>
    </div>
</section>

Field Errors

NOTE: Error text appears below help text.

  1. A field specific error message.

  2. A field specific error message.

    An example of extra help text to explain field.

<ol class="form-step-list">
  <li>
    <label for="text1-input">Enter a line of text</label>
    <input type="text" placeholder="placeholder" id="text1-input" class="ng-invalid ng-touched">
    <p class="error">A field specific error message.</p>
  </li>

  <li>
    <label for="text2-input">Enter a line of text</label>
    <input type="text" placeholder="placeholder" id="text2-input" class="ng-invalid ng-touched">
    <p class="error">A field specific error message.</p>
    <p class="form-help">An example of extra help text to explain field.</p>
  </li>
</ol>

Field Help

  1. An example of extra help text to explain field.

<ol class="form-step-list">
  <li>
    <label for="choice-input">Select an option</label>
    <select id="choice-input">
      <option selected="selected" disabled>Default</option>
      <option>First choice</option>
      <option>Another choice</option>
      <option>One more</option>
    </select>
    <p class="form-help">An example of extra help text to explain field.</p>
  </li>
</ol>

Form Layouts

Standard Form Layout
(with basic form element examples)

Some Header

An alert triggered by form submission errors.

This type of error alert should go at the top of the form content to indicate it's related to the overall form instead of to a specific form field.

  1. This is an example of a field specific error message.

  2. A field specific error message.

    An example of extra help text to explain field.

  3. A field specific error message.

  4. Make a choice
  5. Select any or none of the following
  6. An example of extra help text to explain field.

  7. Select multiple options

Back

<div style="padding: 1em; background: #f5f5f6">

<section class="wide-box content-section">
    <header class="wide-box__header">
      <h4>Some Header</h4>
    </header>

    <div class="wide-box__body">
      <form>
        <div class="alert alert--danger">
            <p>An alert triggered by form submission errors.</p>
            <p>This type of error alert should go at the top of the form content to indicate it's related to the overall form instead of to a specific form field.</p>
        </div>

        <ol class="form-step-list">
          <li>
            <label for="text3-input">Enter a line of text</label>
            <input type="text" placeholder="placeholder" id="text3-input" class="ng-invalid ng-touched">
            <p class="error">This is an example of a field specific error message.</p>
          </li>

          <li>
            <label for="text4-input">Enter a line of text</label>
            <input type="text" placeholder="placeholder" id="text4-input" class="ng-invalid ng-touched">
            <p class="error">A field specific error message.</p>
            <p class="form-help">An example of extra help text to explain field.</p>
          </li>

          <li class="col-group all--1-2">
            <div class="col">
              <label for="text5-input">Side by Side Input #1</label>
              <input type="text" placeholder="placeholder" id="text5-input" class="ng-invalid ng-touched">
              <p class="error">A field specific error message.</p>
            </div>

            <div class="col">
              <label for="text6-input">Side by Side Input #2</label>
              <input type="text" placeholder="placeholder" id="text6-input">
            </div>
          </li>

          <li>
            <label for="textarea1-input">Write some longer text</label>
            <textarea cols="30" rows="10" placeholder="placeholder" id="textarea1-input"></textarea>
          </li>

          <li>
            <span class="label" id="myChoiceRadios-label">Make a choice</span>

            <ul class="spaced-list" role="radiogroup" aria-labelledby="myChoiceRadios-label">
              <li>
                <label class="md-radio-button">
                  <input type="radio" name="choice" aria-labelledby="myChoiceRadios-label">
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Yes</span>
                </label>
              </li>

              <li>
                <label class="md-radio-button">
                  <input type="radio" name="choice" aria-labelledby="myChoiceRadios-label">
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">No</span>
                </label>
              </li>
            </ul>
          </li>

          <li>
            <span class="label" id="checkSomeOrNone-label">Select any or none of the following</span>

            <ul class="spaced-list" role="group" aria-labelledby="checkSomeOrNone-label">
              <li>
                <label class="md-checkbox">
                  <input type="checkbox" aria-labelledby="checkSomeOrNone-label">
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Red</span>
                </label>
              </li>

              <li>
                <label class="md-checkbox">
                  <input type="checkbox" aria-labelledby="checkSomeOrNone-label">
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Blue</span>
                </label>
              </li>

              <li>
                <label class="md-checkbox">
                  <input type="checkbox" aria-labelledby="checkSomeOrNone-label">
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Orange</span>
                </label>
              </li>
            </ul>
          </li>

          <li>
            <label for="file1-input">Upload a file</label>
            <input type="file" id="file1-input">
          </li>

          <li>
            <label for="someChoice-input">Select an option</label>
            <select id="someChoice-input">
              <option selected="selected" disabled>Default</option>
              <option>First choice</option>
              <option>Another choice</option>
              <option>One more</option>
            </select>
            <p class="form-help">An example of extra help text to explain field.</p>
          </li>

          <li>
            <span class="label" id="myDate-label">Select multiple options</span>

            <span class="compound-input" role="group" aria-labelledby="myDate-label">
              <select aria-label="Month">
                <option value="" selected disabled>Month</option>
                <option>October</option>
              </select>

              <select aria-label="Day">
                <option value="" selected disabled>Day</option>
                <option>24</option>
              </select>

              <select aria-label="Year">
                <option value="" selected disabled>Year</option>
                <option>1984</option>
              </select>
            </span>
          </li>
        </ol>
      </form>
    </div><!-- /.wide-box__body -->
</section>

<p class="main-actions">
  <a href="/back.html">Back</a>

  <button type="button" class="link u-margin-left-auto">
    Secondary option
  </button>

  <button type="submit" class="btn">
    Continue
  </button>
</p>

</div>

Headers

"Headers" as used in this context refers to specialized header components vs. simple html header tags.

Hero Header

"Hero headers" are used to contain the main header containing the title of a page. Only one should be used per page.

(Step 1 of 3) Schedule withdrawal

How much would you like to withdraw?

Content goes in here...

Cancel

<div style="padding: 1em; background: #f5f5f6">

<header class="hero-header">
    <p class="hero-header__tagline">(Step 1 of 3) Schedule withdrawal</p>
    <h1>How much would you like to withdraw?</h1>
</header>

<section class="wide-box content-section">
    <div class="wide-box__body">
        Content goes in here...
    </div>
</section>

<p class="main-actions">
    <a href="/blah.html">Cancel</a>

    <button type="submit" class="btn">
        Schedule withdrawal
    </button>
</p>

</div>

Specialized Headings

These are less frequently used spacialized heading styles so are not mapped to specific html heading tags. The class name defing them can be added to whatever tag seems semantically appropriate to the use case.

The specialized heading styles are defined in visual style guide but may not be used in all apps. - Need specific usage examples.

This is a page title

Greeting

Number One

Number Two

<h1 class="page-title">This is a page title</h1>

<p class="greeting">Greeting</p>

<p class="number-one">Number One</p>

<p class="number-two">Number Two</p>

Links

See base link styles for comparison.

Links vs. Buttons:

See Accessible Buttons for examples of when to use links vs. buttons.

Apply to buttons instead of using an anchor tag to make it look like a link visually.

IMPORTANT: Only use for interactive elements such as buttons. Do not use for non-interactive elements!.

<p>
  <button type="button" class="link">Cancel</button>
</p>

Link with right pointing arrow.

<p>
  <a href="/blah.html" class="goto-link">My Documents</a>
</p>

NOTE: So far this is used only in one place each in Wealth and Advisor. Need to better define usage and standardize design.

Cancel

<p>
  <a href="/back.html" class="negative-action-link">Cancel</a>
</p>

<p>
  <button type="button" class="link negative-action-link">
    Delete
  </button>
</p>

Secondary links are more subtle de-emphasized links.

<p>
  <a href="/blah.html" class="secondary-link">This is a stand alone secondary link.</a>
</p>

Lists

Basic Lists

Simple list styles

Bulleted List

A basic bulleted list.

  • list item
  • another one
  • one more thing
<ul class="bulleted-list">
  <li>list item</li>
  <li>another one</li>
  <li>one more thing</li>
</ul>

Numbered List

A basic numbered list.

  1. list item
  2. another one
  3. one more thing
<ol class="numbered-list">
  <li>list item</li>
  <li>another one</li>
  <li>one more thing</li>
</ol>

Spaced List

Simple space separated lists. (line items separated by margins)

Default Spacing:

  • Accusantium alias culp
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias culpa, delectus dicta dolorum ea eum id nesciunt nostrum quo sapiente voluptatibus. Doloribus eligendi porro quia quod rem sed voluptatibus!
  • Doloribus eligendi porro

Slightly More Compact:

  • Accusantium alias culp
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias culpa, delectus dicta dolorum ea eum id nesciunt nostrum quo sapiente voluptatibus. Doloribus eligendi porro quia quod rem sed voluptatibus!
  • Doloribus eligendi porro

Wide Spacing:

  • Accusantium alias culp
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias culpa, delectus dicta dolorum ea eum id nesciunt nostrum quo sapiente voluptatibus. Doloribus eligendi porro quia quod rem sed voluptatibus!
  • Doloribus eligendi porro
<h4>Default Spacing:</h4>
<ul class="spaced-list">
  <li>Accusantium alias culp</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias culpa, delectus dicta dolorum ea eum id nesciunt nostrum quo sapiente voluptatibus. Doloribus eligendi porro quia quod rem sed voluptatibus!</li>
  <li>Doloribus eligendi porro</li>
</ul>

<hr>

<h4>Slightly More Compact:</h4>
<ul class="compact-spaced-list">
  <li>Accusantium alias culp</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias culpa, delectus dicta dolorum ea eum id nesciunt nostrum quo sapiente voluptatibus. Doloribus eligendi porro quia quod rem sed voluptatibus!</li>
  <li>Doloribus eligendi porro</li>
</ul>

<hr>

<h4>Wide Spacing:</h4>
<ul class="wide-spaced-list">
  <li>Accusantium alias culp</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias culpa, delectus dicta dolorum ea eum id nesciunt nostrum quo sapiente voluptatibus. Doloribus eligendi porro quia quod rem sed voluptatibus!</li>
  <li>Doloribus eligendi porro</li>
</ul>

Specialized Lists

More specialized "fancy" lists.

Progress List

NOTE: The Progress List is no longer used inside Wealth but may still be used in Borrower-related apps and others.

  1. Completed item
  2. Current item
  3. An upcoming item
  4. And another one after that
<ol class="progress-list">
  <li class="complete">Completed item</li>
  <li class="current">Current item</li>
  <li>An upcoming item</li>
  <li>And another one after that</li>
</ol>

Modals

NOTE: We still use Bootstrap for modals in many of our apps. The styles included in shared-styles override some Bootstrap styles. (We could potentially build our own completely custom modals at some point and remove Bootstrap dependency.)

Modals are also often referred to as dialogs, pop ups or popovers.

<div style="padding: 20px; background: #666;">

<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <header class="modal-header">
            <button type="button" class="close" data-dismiss="modal" ng-click="vm.close()">
                <svg class="svg-icon svg-icon--sm" arial-label="Close">
                    <use xlink:href="#close-x">
                </svg>
            </button>

            <h2>Header for Modal</h2>
        </header>

        <div class="modal-body">
            <p>Some text content.</p>
        </div><!-- /.modal-body -->

        <footer class="modal-footer">
            <button type="button" class="link">Secondary action</button>

            <button type="button" class="btn">Primary action</button>
        </footer>
    </div>
</div>

</div>

Tables

NOTE: Table visual design patterns still need better definition and standardization. (Not yet standardized in UX style guide.)

Alternating Row Table

Add the class "responsive-table" to make table cells stack into one column in mobile view. You must also add a data-th attribute with the associated table header to each td for this to display headers in mobile view. See below tables for examples of how this works. (Narrow your browser screen.)

Table Caption
Table Header 1 Table Header 2 Table Header 3
Cell content Cell content Cell content
Cell content Cell content Cell content
Cell content Cell content Cell content
<table class="alternating-row-table responsive-table">
  <caption>Table Caption</caption>

  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-th="Table Header 1">Cell content</td>
      <td data-th="Table Header 2">Cell content</td>
      <td data-th="Table Header 3">Cell content</td>
    </tr>

    <tr>
      <td data-th="Table Header 1">Cell content</td>
      <td data-th="Table Header 2">Cell content</td>
      <td data-th="Table Header 3">Cell content</td>
    </tr>

    <tr>
      <td data-th="Table Header 1">Cell content</td>
      <td data-th="Table Header 2">Cell content</td>
      <td data-th="Table Header 3">Cell content</td>
    </tr>
  </tbody>
</table>

Simple Data Table

This is a plain borderless table for displaying a simple table of values. It has no separate thead so shouldn't use a tbody tag.

(NOTE: Currently you must add an extra class to align th's to the right. This may be changed to a default style instead once this design pattern is better standardized.)

Table header Some associated data
Header Some misc associated table data
Header 3 Some other associated data
<table class="simple-data-table">
  <tr>
    <th class="u-text-align-right">Table header</th>
    <td>Some associated data</td>
  </tr>

  <tr>
    <th class="u-text-align-right">Header</th>
    <td>Some misc associated table data</td>
  </tr>

  <tr>
    <th class="u-text-align-right">Header 3</th>
    <td>Some other associated data</td>
  </tr>
</table>

Bordered Table

NOTE: This was originally created as a temporary table style. It's no longer used within Wealth but is still used in Advisor for some tables. If we want to continue using it we should better define how/where to use it and perhaps refine the design.

Table Variation 1
Table Header 1 Table Header 2 Table Header 3
Cell content Cell content Cell content
Cell content Cell content Cell content
Cell content Cell content Cell content
Table Variation 2
Table Header 1 Cell content Cell content Cell content
Table Header 2 Cell content Cell content Cell content
Table Header 3 Cell content Cell content Cell content
<table class="bordered-table">
  <caption>Table Variation 1</caption>

  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-th="Table Header 1">Cell content</td>
      <td data-th="Table Header 2">Cell content</td>
      <td data-th="Table Header 3">Cell content</td>
    </tr>

    <tr>
      <td data-th="Table Header 1">Cell content</td>
      <td data-th="Table Header 2">Cell content</td>
      <td data-th="Table Header 3">Cell content</td>
    </tr>

    <tr>
      <td data-th="Table Header 1">Cell content</td>
      <td data-th="Table Header 2">Cell content</td>
      <td data-th="Table Header 3">Cell content</td>
    </tr>
  </tbody>
</table>

<table class="bordered-table">
  <caption>Table Variation 2</caption>

  <tr>
    <th>Table Header 1</th>
    <td data-th="Table Header 1">Cell content</td>
    <td data-th="Table Header 2">Cell content</td>
    <td data-th="Table Header 3">Cell content</td>
  </tr>

  <tr>
    <th>Table Header 2</th>
    <td data-th="Table Header 1">Cell content</td>
    <td data-th="Table Header 2">Cell content</td>
    <td data-th="Table Header 3">Cell content</td>
  </tr>

  <tr>
    <th>Table Header 3</th>
    <td data-th="Table Header 1">Cell content</td>
    <td data-th="Table Header 2">Cell content</td>
    <td data-th="Table Header 3">Cell content</td>
  </tr>
</table>

Tabs

  • This is a Tab Title
  • Another Tab
  • This is One too
<ul class="tabs-list">
    <li class="tabs-list__tab is-current">
        This is a Tab Title
    </li>

    <li class="tabs-list__tab">
        Another Tab
    </li>

    <li class="tabs-list__tab">
        This is One too
    </li>
</ul>

Text

Color Coded Text

"Positive", "Negative" and "Caution" text. Can be applied to either inline or block elements.

Lorem ipsum dolor sit amet.

Hic porro obcaecati.

Consequatur, quod ipsam facilis.


"Subtle" text

<p class="positive-text">Lorem ipsum dolor sit amet.</p>
<p class="negative-text">Hic porro obcaecati.</p>
<p class="caution-text">Consequatur, quod ipsam facilis.</p>

<hr>

<p class="subtle-text">"Subtle" text</p>

HTML Element Style Text

Useful if you want to apply "strong" or "small" element styles to an entire block-level element instead of using the actual inline-level HTML tags and/or only need the visual styling but not semantics.

Regular paragraph text for comparison.

"Strong" paragraph text.

"Small" paragraph text.

<p>Regular paragraph text for comparison.</p>
<p class="strong">"Strong" paragraph text.</p>
<p class="small">"Small" paragraph text.</p>

Truncated Text

Appends an ellipsis after truncated text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu tristique leo. Morbi egestas gravida luctus. Vivamus quis orci eget ex pretium ultrices in non orci Read More

<p>
  <span class="is-truncated">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu tristique leo. Morbi egestas gravida luctus. Vivamus quis orci eget ex pretium ultrices in non orci
  </span>

  <a href="/blah.html" class="u-nowrap">Read More</a>
</p>
Go to top ⇧