Colors

Logo Colors

Full Color Logo

Green Primary
HEX
#87B940
RGB
135,185,64
CMYK
53,7,100,0
Grey Primary
HEX
#BAB7B1
RGB
186,183,177
CMYK
28,23,27,0
Brown Primary
HEX
#9C947A
RGB
156,148,122
CMYK
40,35,54,4

Single Color Logos

Green Primary
HEX
#87B940
RGB
135,185,64
CMYK
53,7,100,0
Black
HEX
#000000
RGB
0,0,0
CMYK
75,68,67,90
White
HEX
#FFFFFF
RGB
255,255,255
CMYK
0,0,0,0
Acceptable Usefor Logo Colors

The full 3-color logo is the primary logo and should be used in all instances when possible.

There may be some instances where a single color logo is appropriate, such as using the FamilySearch logo on photography, apparel, spiffs, etc.

Avoidfor Logo Colors

Do not use any other colors for the logo.

Accent Colors

Red Accent
HEX
#F16458
RGB
241,100,88
CMYK
0,76,64,0
Blue Accent
HEX
#27C4F4
RGB
39,196,244
CMYK
64,0,0,0
Orange Accent
HEX
#FCB34B
RGB
252,179,75
CMYK
0,34,80,0
Green Accent
HEX
#BFD730
RGB
191,215,48
CMYK
30,0,100,0
Purple Accent
HEX
#996799
RGB
153,103,153
CMYK
36,70,11,0
Brown Accent
HEX
#9C947A
RGB
156,148,122
CMYK
40,35,54,4

Adjusting the Value

100%
80%
60%
40%
Acceptable Usefor Accent Colors

Use accent colors to help draw attention and create visual interest within your designs.

You can lighten the value of the color by adjusting the amount of white added to it (use the Stylus function lighten(color, amount)) or by adjusting the opacity of the color (use the Stylus function rgba(hex, alpha)).

Avoidfor Accent Colors

Avoid using too many colors.

Avoid darkening the value of the color by adjusting the amount of black added to it.

Text Colors

Body Text
Grey Body
HEX
#333331
RGB
51,51,49
CMYK
64,57,59,38
Headings
Grey
HEX
#4D4D4A
RGB
77,77,74
Sub-Headings, Labels, and Small Text
Grey Light
HEX
#666662
RGB
102,102,98
Avoidfor Text Colors

Do not use other colors for text.

Background Colors

Grey Body
HEX
#333331
RGB
51,51,49
CMYK
64,57,59,38
Grey
HEX
#4D4D4A
RGB
77,77,74
Grey Light
HEX
#666662
RGB
102,102,98
Grey Background
HEX
#ECEBEA
RGB
236,235,234
Grey Background Light
HEX
#F4F4F4
RGB
244,244,244

Other Colors

Gender Colors

Male
Blue Gender
HEX
#3D8FF7
RGB
601,143,247
Female
Pink Gender
HEX
#E23F7B
RGB
226,63,123
Unknown
Grey Light
HEX
#666662
RGB
102,102,98

Light Gender Colors

Blue Gender Light
HEX
#99C4FE
RGB
153,196,254
Pink Gender Light
HEX
#F48EB6
RGB
244,142,182

Border Color

Grey Border
HEX
#CCCCCC
RGB
204,204,204
Acceptable Usefor Other Colors

The male and female gender colors should only be used to represent gender.

Use the Light Gender Colors when on dark backgrounds.

Break Points

Media Queries

Stylus Variable Mobile
< 768px
Tablet
>= 768px
Desktop
>= 992px
Desktop HD
>= 1200px
$break-mobile Visible Hidden Hidden Hidden
$break-tablet-below Visible Visible Hidden Hidden
$break-tablet Hidden Visible Hidden Hidden
$break-tablet-above Hidden Visible Visible Visible
$break-desktop-below Visible Visible Visible Hidden
$break-desktop Hidden Hidden Visible Hidden
$break-desktop-above Hidden Hidden Visible Visible
$break-desktop-hd Hidden Hidden Hidden Visible
@media $break-tablet {
  body { width: 600px; }
}

Typography

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Acceptable Usefor Headings

Use headings in the correct hierarchical manner (<h1> followed by <h2>, and so on) as this improves readability and scannability for all users.

Avoidfor Headings

Do not use headings to achieve visual results only (e.g. skipping heading levels because the lower degree heading matches the desired look).

Do not use text formatting, such as font size or bold, to give the visual appearance of a heading when it is not a heading.

Accessibilityfor Headings

Screen readers can navigate to any heading on the page. All headings should be descriptive and unique.

Use headings (even visually hidden ones) to help screen readers navigate a complex page or DOM structure.

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>

Heading Classes

H1 styled as H5

H2 styled as H4

H3 styled as H3

H4 styled as H2

H5 styled as H1

Campaign Heading

Acceptable Usefor Heading Classes

You may style headings to look like other headings in order to achieve aesthetic visual design but keep correct hierarchical structure (e.g. style an <h1> to look like an <h3>).

Avoidfor Heading Classes

Do not apply the heading classes to elements that are not headings (e.g. <div>).

Do not use the Campaign Heading except for campaign pages.

<h1 class="fs-h5">H1 styled as H5</h1>
<h2 class="fs-h4">H2 styled as H4</h2>
<h3 class="fs-h3">H3 styled as H3</h3>
<h4 class="fs-h2">H4 styled as H2</h4>
<h5 class="fs-h1">H5 styled as H1</h5>
<h1 class="fs-h1--campaign">Campaign Heading</h1>

Paragraphs

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Avoidfor Paragraphs

Do not use any font size smaller than the standard paragraph size for any text (other than captions and labels).

Accessibilityfor Paragraphs

When possible, place the distinguishing information of a paragraph in the first sentence to help improve the scannability of content for all users.

<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a
self-contained unit of a discourse in writing dealing with a particular point or idea.
A paragraph consists of one or more sentences. Though not required by the syntax of any
language, paragraphs are usually an expected part of formal writing, used to organize
longer prose.</p>

Inline Elements

Strong is used to indicate strong importance

Emphasized or italicized text

Superscript®

Subscript for things like H2O

This small text is small for fine print, etc.

Avoidfor Inline Elements

Do not use <small> as a stand alone element just for small text. It should only be used inline with other text.

<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>Emphasized or italicized text</em></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for fine print, etc.</small></p>

Lists

Unordered Lists

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
Avoidfor Unordered Lists

Do not use lists to merely indent or for other layout purposes.

Accessibilityfor Unordered Lists

Screen readers can navigate to any list on the page and even jump from list item to list item within a list. Use lists to allow screen readers to navigate between groups of items easily (such as a list of persons).

You can label a list so screen readers know what the list is by using aria-label or aria-labeledby=[id] on the <ul> element.

<ul>
  <li>This is a list item in an unordered list</li>
  <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
  <li>Lists can be nested inside of each other
    <ul>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an unordered list</li>
    </ul>
  </li>
  <li>This is the last list item</li>
</ul>

Ordered Lists

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

The criteria for Unordered Lists also applies to Ordered Lists.

<ol>
  <li>This is a list item in an ordered list</li>
  <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
  <li>
    Lists can be nested inside of each other
    <ol>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an ordered list</li>
    </ol>
  </li>
  <li>This is the last list item</li>
</ol>

Forms

Text Field

Acceptable Usefor Text Field

All form fields must have an associated <label> for accessibility. If you must hide the text of the label, use the class visually-hidden. Never use display:none as that will hide it from screen readers as well.

Accessibilityfor Text Field

When marking a form field as required, you do not need the aria-required attribute. Instead, just use the required attribute.

Wrap the input elements in a <form> element so that the enter key will submit the form. You can then add an event listener to the onsubmit event to determine what should happen.

Wrap the inputs in a <fieldset> element with a short and descriptive <legend> to group thematically related controls in a form such as address, date of birth, and sets of radio buttons or check boxes. Screen readers will prefix the text to each control label contained within the fieldset.

<fieldset>
  <p>
    <label for="text">Text Input</label>
    <input id="text" type="text" placeholder="Text Input"/>
  </p>
  <p>
    <label for="textarea">Textarea</label>
    <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
  </p>
  <p>
    <label for="disabled_text">Disabled Input</label>
    <input id="disabled_text" type="text" placeholder="Disabled" disabled/>
  </p>
</fieldset>

Select Menu

Acceptable Usefor Select Menu

Use a select menu when the user needs to select from a list of six or more options.

Avoidfor Select Menu

Avoid using select menus when there are five or less options.

Avoid multi select menus since not all browsers have keyboard support for them and not all users understand how to use them.

Accessibilityfor Select Menu

When appropriate, use the <optgroup> element to group related options together for better readability. See Accessible Select Menu for an example.

<label for="select">Select</label>
<select id="select">
  <option>Option One</option>
  <option>Option Two</option>
  <option>Option Three</option>
  <option>Option Four</option>
  <option>Option Five</option>
  <option>Option Six</option>
</select>

Checkbox

List of checkboxes
Disabled checkboxes
Acceptable Usefor Checkbox

Each checkbox must have an associated <label> for accessibility. If you must hide the text of the label, add the text as an aria-label attribute. Never use display:none as that will hide it from screen readers as well.

Accessibilityfor Checkbox

Wrap the checkboxes in a <fieldset> element with a short and descriptive <legend>. Screen readers will prefix the text to each control label contained within the fieldset.

<form action="#">
  <fieldset>
    <legend>List of checkboxes</legend>
    <ul>
      <li>
        <input name="checkbox" type="checkbox" id="choiceA" checked/>
        <label for="choiceA">Choice A</label>
      </li>
      <li>
        <input name="checkbox" type="checkbox" id="choiceB"/>
        <label for="choiceB">Choice B</label>
      </li>
      <li>
        <input name="checkbox" type="checkbox" id="choiceC"/>
        <label for="choiceC">Choice C</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Disabled checkboxes</legend>
    <ul>
      <li>
        <input name="checkbox-disabled" type="checkbox" id="choiceADisabled" checked disabled/>
        <label for="choiceADisabled">Selected</label>
      </li>
      <li>
        <input name="checkbox-disabled" type="checkbox" id="choiceBDisabled" disabled/>
        <label for="choiceBDisabled">Not selected</label>
      </li>
    </ul>
  </fieldset>
</form>

Radio Buttons

List of radio buttons
Disabled radio buttons
Acceptable Usefor Radio Buttons

Use radio buttons when the user needs to select from a list of less than five options.

Each radio button must have an associated <label> for accessibility. If you must hide the text of the label, add the text as an aria-label attribute. Never use display:none as that will hide it from screen readers as well.

Avoidfor Radio Buttons

Avoid using radio buttons when there are more than five options. Those options would be better displayed as a select menu.

Accessibilityfor Radio Buttons

Wrap the radio buttons in a <fieldset> element with a short and descriptive <legend>. Screen readers will prefix the text to each control label contained within the fieldset.

<form action="#">
  <fieldset>
    <legend>List of radio buttons</legend>
    <ul>
      <li>
        <input name="radio" type="radio" id="option1" checked/>
        <label for="option1">Option 1</label>
      </li>
      <li>
        <input name="radio" type="radio" id="option2"/>
        <label for="option2">Option 2</label>
      </li>
      <li>
        <input name="radio" type="radio" id="option3"/>
        <label for="option3">Option 3</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Disabled radio buttons</legend>
    <ul>
      <li>
        <input name="radio-disabled" type="radio" id="option1-disabled" checked disabled/>
        <label for="option1-disabled">Selected</label>
      </li>
      <li>
        <input name="radio-disabled" type="radio" id="option2-disabled" disabled/>
        <label for="option2-disabled">Not selected</label>
      </li>
    </ul>
  </fieldset>
</form>

Field Groups

This is an example of inline help text that could be helpful. It will wrap when there is more text.
Accessibilityfor Field Groups

When using a field group with a checkbox, the checkbox must still have an associated <label>. Add an aria-label attribute to the the <label> element to add text just for screen readers but not visual users.

When using a field group with help text, use the attribute aria-describedby=[id]. This will cause the screen reader to read the contents of the help text when focusing on the text field.

<label class="example__title" for="withCheckbox">With Checkbox</label>
<div class="fs-field-group">
  <input class="fs-field-group__input" id="withCheckbox" type="text" placeholder="Example Text"/>
  <div class="fs-field-group__attachment">
    <input type="checkbox" id="markAsExact"/>
    <label for="markAsExact" aria-label="Mark as exact"></label>
  </div>
</div>

<label class="example__title" for="withButton">With Button</label>
<div class="fs-field-group">
  <input class="fs-field-group__input" id="withButton" type="text" placeholder="Example Text"/>
  <div class="fs-field-group__button">
    <button class="fs-button fs-button--recommended fs-button--small">Submit</button>
  </div>
</div>

<label class="example__title" for="withHelpText">With Help Text</label>
<div class="fs-field-group fs-field-group--help">
  <input class="fs-field-group__input" id="withHelpText" type="text" placeholder="Example Text" aria-describedby="helpText"/>
  <small class="fs-field-group__help" id="helpText">This is an example of inline help text that could be helpful. It will wrap when there is more text.</small>
</div>

Field Validation

Please save changes below.

Please enter an email address.

Please enter a valid email.

Please save changes below.

Please enter an email address.

Please enter a valid email.

Please save changes below.

Please enter an email address.

Please enter a valid email.

Please save changes below.

Please enter an email address.

Please enter a valid email.

Acceptable Usefor Field Validation

Any type of form field (textareas, input fields, radios, etc.) can be used for validation.

Accessibilityfor Field Validation

Associate each message with the form field by using the attribute aria-describedby=[id]. This will cause the screen reader to read the contents of the message when focusing on the form field. This means that as the state changes, so too should the id that the aria-describedby references.

When using the invalid state, use the attribute aria-invalid="true" so screen readers know the form field is invalid.

<label class="example__title" for="defaultState">Default State</label>
<div class="fs-field-validation">
  <input id="defaultState" type="text" placeholder="Example Text"/>
  <p class="fs-field-validation__valid-message" id="validMessage">Please save changes below.</p>
  <p class="fs-field-validation__warning-message" id="warningMessage">Please enter an email address.</p>
  <p class="fs-field-validation__invalid-message" id="invalidMessage">Please enter a valid email.</p>
</div>

<label class="example__title" for="validState">Valid State</label>
<div class="fs-field-validation fs-field-validation--valid">
  <input id="validState" type="text" placeholder="Example Text" aria-describedby="validMessage"/>
  <p class="fs-field-validation__valid-message" id="validMessage">Please save changes below.</p>
  <p class="fs-field-validation__warning-message" id="warningMessage">Please enter an email address.</p>
  <p class="fs-field-validation__invalid-message" id="invalidMessage">Please enter a valid email.</p>
</div>

<label class="example__title" for="warningState">Warning State</label>
<div class="fs-field-validation fs-field-validation--warning">
  <input id="warningState" type="text" placeholder="Example Text" aria-describedby="warningMessage"/>
  <p class="fs-field-validation__valid-message" id="validMessage">Please save changes below.</p>
  <p class="fs-field-validation__warning-message" id="warningMessage">Please enter an email address.</p>
  <p class="fs-field-validation__invalid-message" id="invalidMessage">Please enter a valid email.</p>
</div>

<label class="example__title" for="invalidState">Invalid State</label>
<div class="fs-field-validation fs-field-validation--invalid">
  <input id="invalidState" type="text" placeholder="Example Text" aria-describedby="invalidMessage" aria-invalid="true"/>
  <p class="fs-field-validation__valid-message" id="validMessage">Please save changes below.</p>
  <p class="fs-field-validation__warning-message" id="warningMessage">Please enter an email address.</p>
  <p class="fs-field-validation__invalid-message" id="invalidMessage">Please enter a valid email.</p>
</div>

Buttons

Types

Options

Sizes

Elements Anchor

Disabled

Acceptable Usefor Types

By default, buttons are left aligned to the content. In most cases, the recommended button is the leftmost button.

The fs-button should be used for most buttons.

The fs-button--recommended should be used to recommend an action to the user.

The fs-button--minor should be used for actions that you wish to de-emphasize.

The fs-button--destructive should be used to confirm actions that will cause the user to permanently lose data (e.g. deleting a photo).

Avoidfor Types

Do not use the fs-button--recommended for any actions that would cause the use to lose data (such as deleting a message).

Do not use the fs-button--large for anything other than landing pages and marketing campaign pages.

<p>
  <small class="example__title">Options</small>
  <button type="button" class="fs-button fs-button--recommended">Recommended</button>
  <button type="button" class="fs-button">Button</button>
  <button type="button" class="fs-button fs-button--minor">Minor</button>
  <button type="button" class="fs-button fs-button--destructive">Destructive</button>
</p>

<p>
  <small class="example__title">Sizes</small>
  <button type="button" class="fs-button fs-button--large">Large</button>
  <button type="button" class="fs-button">Default</button>
  <button type="button" class="fs-button fs-button--small">Small</button>
</p>

<p>
  <small class="example__title">Elements</small>
  <button type="button" class="fs-button">Button</button>
  <a href="javascript:void(0)" class="fs-button" role="button">Anchor</a>
  <input type="submit" class="fs-button" value="Submit"/>
</p>

<p>
  <small class="example__title">Disabled</small>
  <button type="button" class="fs-button fs-button--recommended" disabled>Recommended</button>
  <button type="button" class="fs-button" disabled>Button</button>
</p>

Animations

Loading - fs-button--loading

The fs-button--loading class will only work for buttons and anchor tags. Input tags will not work.

Acceptable Usefor Animations

Disable the button while the fs-button--loading class is active.

<p>
  <button type="button" class="fs-button fs-button--loading">Loading</button>
<p>

Icons

Usage

fs-icon
fs-icon-check
fs-icon-before
fs-icon-check
fs-icon-after
fs-icon-check
Acceptable Usefor Usage

Use icons almost anywhere using the class fs-icon and the icon's name.

Icons can also be placed :before and :after the element using fs-icon-before and fs-icon-after.

An icon using the class fs-icon will need to have it's width and height set to show. There is no default set to avoid conflicts with elements that might have already set their width or height.

Accessibilityfor Usage

In the majority of cases, icons should always have a visual text label associated with them. Icons without text pose a usability problem for most users as they don't know how to interpret the meaning of the icon.

If you must hide the text of the icon, use the class visually-hidden or an aria-label. Never use display:none as that will hide it from screen readers as well.

<small class="example__title">fs-icon</small>
<div class="fs-icon fs-icon-check">fs-icon-check</div>

<small class="example__title">fs-icon-before</small>
<div class="fs-icon-before fs-icon-check">fs-icon-check</div>

<small class="example__title">fs-icon-after</small>
<div class="fs-icon-after fs-icon-check">fs-icon-check</div>

Available Icons

fs-icon-check
fs-icon-close
fs-icon-exclamation
fs-icon-info
fs-icon-spinner
fs-icon-spinner-light
fs-icon-warning
fs-icon-small-female
fs-icon-medium-female
fs-icon-large-female
fs-icon-small-male
fs-icon-medium-male
fs-icon-large-male
fs-icon-small-unknown
fs-icon-medium-unknown
fs-icon-large-unknown

Tooltips

Types

Default tooltip position is above. You can also position the tooltip to the right. Or even below the element. And lets not forget to the left.
Acceptable Usefor Types

The contents of the element that has the class fs-tootip__body will be shown when the element with the class fs-tooltip__trigger is hovered or selected. The tooltip will be centered around the element that has the class fs-tooltip.

fs-tooltip__body and fs-tooltip__trigger must be direct siblings for for the tooltip to work.

Accessibilityfor Types

Never put information that is pertinent to the user in the title attribute. Screen readers typically don't read the contents of the title attribute and keyboard users will never see it because it requires a mouse hover.

Associate each tooltip message with the element by using the attribute aria-describedby=[id]. This will cause the screen reader to read the contents of the message when focusing on the element.

Add the attribute role="tooltip" to the .fs-tooltip__body.

<span class="fs-tooltip">
  <button class="fs-button fs-tooltip__trigger" aria-describedby="myTip1">Default (above)</button>
  <span class="fs-tooltip__body" id="myTip1" role="tooltip">Default tooltip position is above.</span>
</span>

<span class="fs-tooltip">
  <button class="fs-button fs-tooltip__trigger" aria-describedby="myTip2">Right</button>
  <span class="fs-tooltip__body fs-tooltip__body--right" id="myTip2" role="tooltip">You can also position the tooltip to the right.</span>
</span>

<span class="fs-tooltip">
  <button class="fs-button fs-tooltip__trigger" aria-describedby="myTip3">Below</button>
  <span class="fs-tooltip__body fs-tooltip__body--below" id="myTip3" role="tooltip">Or even below the element.</span>
</span>

<span class="fs-tooltip">
  <button class="fs-button fs-tooltip__trigger" aria-describedby="myTip4">Left</button>
  <span class="fs-tooltip__body fs-tooltip__body--left" id="myTip4" role="tooltip">And lets not forget to the left.</span>
</span>

Badges

Types

Memories7

Memories7

<p>
  <span>Memories<span class="fs-badge">7</span></span>
</p>
<p>
  <span style="background: #4d4d4a; color: #fff; display: inline-block; padding: 5px;">Memories<span class="fs-badge fs-badge--light">7</span>
  </span>
</p>

Alerts

Types

Success

Item deleted successfully. Undo.

Info

Upcoming change to temple policy. Read More.

Warning

This batch contains data inconsistencies.

Error

Unable to delete note.

Acceptable Usefor Types

Place alerts in close proximity to the object or section that they are related to. The width of the alert should be determined by the width of its context. If an alert deals with the context of the entire website, such as a system alert, it should be the full width of the page. Otherwise the width and placement of the alert should help communicate the context of what it relates to.

Always keep alert messages brief and concise. When an alert is not the users fault, use terms like "System Error" instead of simply "Error" to avoid making them feel like they did something wrong.

Avoidfor Types

Do not use an alert when you need more actions than a simple link (please refer to the Links section for information about how to use a link). Use a modal or popover instead.

Accessibilityfor Types

For the most part, you should not add role="alert" to alerts. An alert with role="alert" is for alerts that appear dynamically somewhere outside of where the user is currently focused and which contains important or time sensitive information (for example an alert that informs the user of an invalid input field).

When the browser encounters an element with the role="alert" attribute, it will immediately read the contents of alert to the user. To quote MDN:

"Because of its intrusive nature, the alert role must be used sparingly and only in situations where the user's immediate attention is required. Dynamic changes that are less urgent should use a less aggressive method, such as aria-live="polite" or other live region roles."

See the MDN reference for role=alert for more information on when to use role="alert".

<small class="example__title">Success</small>
<div class="fs-alert">
  <p>Item deleted successfully. <a href="javascript:void(0);">Undo</a>.</p>
</div>

<small class="example__title">Info</small>
<div class="fs-alert fs-alert--info">
  <p>Upcoming change to temple policy. <a href="javascript:void(0);">Read More</a>.</p>
</div>

<small class="example__title">Warning</small>
<div class="fs-alert fs-alert--warning">
  <p>This batch contains data inconsistencies.</p>
</div>

<small class="example__title">Error</small>
<div class="fs-alert fs-alert--error">
  <p>Unable to delete note.</p>
</div>

Alerts with a Close Icon

Account saved successfully.

Acceptable Usefor Alerts with a Close Icon

In most cases there is no need to close or dismiss an alert. Only provide a close icon when absolutely necessary.

Accessibilityfor Alerts with a Close Icon

The close icon must have text associated with the icon so that screen readers know what the button will do. Add an aria-label attribute to the the icon to add text just for screen readers but not visual users.

<div class="fs-alert">
  <button class="fs-dialog__close" aria-label="Close alert"></button>
  <p>Account saved successfully.</p>
</div>

Alerts with a Title

Heading title

Private Person

Living and confidential people are managed in a private space. Only you will be able to see and modify this person. However, anyone could potentially see the photos, documents, and stories that are attached to this person.

Bold title

Opportunities: We're sorry, but an error occurred while looking for temple opportunities.

Acceptable Usefor Alerts with a Title

Long and verbose alerts are discouraged, but in some cases a detailed explanation is needed, like the Private Person alert shown here. In this case a title provides a quick glance of what the alert is about.

<small class="example__title">Heading title</small>
<div class="fs-alert fs-alert--info">
  <h4 class="fs-alert__title">Private Person</h4>
  <p>Living and confidential people are managed in a private space. Only you will be able to see and modify this person. However, anyone could potentially see the photos, documents, and stories that are attached to this person.</p>
</div>

<small class="example__title">Bold title</small>
<div class="fs-alert fs-alert--error">
  <p><strong>Opportunities:</strong> We're sorry, but an error occurred while looking for temple opportunities.</p>
</div>

Cards

Cards

Card Title

This is a card. It has a slight border radius and box shadow to make it stand out from the content.
<div class="fs-card">
  <h4 class="fs-card__title">Card Title</h4>
  <div class="fs-card__body">This is a card. It has a slight border radius and box shadow to make it stand out from the content.</div>
</div>

Modals

Static Example

Modal

This is a modal. It really stands out from the content and forces the user to perform an action before they can continue.

Acceptable Usefor Static Example

Use a modal when the user is required to explicitly accept or reject an action or information and cannot proceed without doing so. They can also be used to lead the user through steps in a linear flow.

Modals can also be used to view additional information without navigating away from the current page. This can be especially useful when used in a list of search results and you wish to display the contents of an item without losing your place in the list of results.

By default, modals should close when clicking outside the modal. In cases such as modal flows or where the user has to enter lots of information, you may wish to prevent clicking outside the modal from closing it.

Avoidfor Static Example

Do not use a modal if the user needs information or context that would be hidden by the modal or modal overlay.

Accessibilityfor Static Example

Building an accessible modal is not an easy task. See ARIA Authoring Practices for the complete list of required keyboard interactions. The main takeaways are:

  • The modal must trap keyboard focus to just the modal when it is a dialog modal.
  • The esc key should close the modal so keyboard users do not have to tab to find the close button.
  • When the modal is opened, keyboard focus should focus the modal container element in most cases (use outline: none and tabindex=-1).
  • When the modal is closed, keyboard focus should return the element that opened the modal.

The close icon must have text associated with the icon so that screen readers know what the button will do. Add an aria-label attribute to the the icon to add text just for screen readers but not visual users.

<div class="fs-modal__overlay">
  <div class="fs-modal">

    <div class="fs-modal__content">
      <div class="fs-modal__header">
        <h4 class="fs-modal__title">Modal</h4>
        <button class="fs-dialog__close" aria-label="Close modal"></button>
      </div>
      <div class="fs-modal__body">
        <p>This is a modal. It really stands out from the content and forces the user to perform an action before they can continue.</p>
      </div>
      <div class="fs-modal__buttons">
        <button class="fs-button fs-button--recommended">Done</button>
        <button class="fs-button fs-button--minor">Cancel</button>
      </div>
    </div>

  </div>
</div>

Modal with a Bottom Bar

Modal with a Bottom Bar

This modal has a bottom bar that allows users to prevent the modal from displaying again.

Acceptable Usefor Modal with a Bottom Bar

In most cases there is no need to display the "Don't show this again" message and the bottom bar.

<div class="fs-modal__overlay">
  <div class="fs-modal">

    <div class="fs-modal__content">
      <div class="fs-modal__header">
        <h4 class="fs-modal__title">Modal with a Bottom Bar</h4>
        <button class="fs-dialog__close" aria-label="Close modal"></button>
      </div>
      <div class="fs-modal__body">
        <p>This modal has a bottom bar that allows users to prevent the modal from displaying again.</p>
      </div>
      <div class="fs-modal__buttons">
        <button class="fs-button fs-button--recommended">Done</button>
      </div>
      <div class="fs-modal__footer">
        <label>
          <input type="checkbox">Don't show this again.
        </label>
      </div>
    </div>

  </div>
</div>

Animations

Open - fs-modal--show

Modal Title

This is a modal. It really stands out from the content and forces the user to perform an action before they can continue.

Acceptable Usefor Animations

To open a modal, add the class fs-modal--show to the fs-modal__overlay div.

You should also add the CSS property overflow: hidden to the body tag to prevent the body from scrolling while a modal is open.

<div class="fs-modal__overlay fs-modal--show">
  <div class="fs-modal">

    <div class="fs-modal__content">
      <div class="fs-modal__header">
        <h4 class="fs-modal__title">Modal Title</h4>
        <button class="fs-dialog__close" aria-label="Close modal"></button>
      </div>
      <div class="fs-modal__body">
        <p>This is a modal. It really stands out from the content and forces the user to perform an action before they can continue.</p>
      </div>
      <div class="fs-modal__buttons">
        <button class="fs-button fs-button--recommended">Done</button>
        <button class="fs-button fs-button--minor">Cancel</button>
      </div>
    </div>

  </div>
</div>

Persons

Person Vitals

John Henry Doe
1900-1960  •  5XG4-L2Y
Acceptable Usefor Person Vitals

Use a person to display the name, lifespan, and id of a person.

Avoidfor Person Vitals

Avoid letting the persons lifespan and id line wrap.

<div>
  <div class="fs-person-vitals__name">
    <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
  </div>
  <div class="fs-person-vitals__fs-person-details">
    <div class="fs-person-details__container">
      <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1900-1960</span>
      <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
      <span class="fs-person-details__id" data-test="pid">5XG4-L2Y</span>
      <span class="fs-person-details__selection-stopper"></span>
    </div>
  </div>
</div>

Person with Gender Icon

Male
John Henry Doe
1900-1960  •  5XG4-L2Y

Female
Jane Allison Doe
1920-1980  •  8BA2-AL2

Gender unknown
Alex Doe
1900-1960  •  5XG4-L2Y
Acceptable Usefor Person with Gender Icon

Use the person gender to indicate the gender of the person, especially if the name of the person could be ambiguous.

Accessibilityfor Person with Gender Icon

The gender icon must have text associated with the icon so that screen readers know what the gender of the person is. Add the gender as visually hidden text to the gender icon element.

<span class="visually-hidden">{gender}</span>

Having the gender attached as DOM rather than using aria-label will allow screen readers reading line by line to hear the gender. If you use an aria-label, the screen reader won't treat it as a line and will skip over the gender icon.

<div class="fs-person-gender">
  <div class="fs-person-gender__container fs-person-gender--medium">
    <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-medium-male">
      <span class="visually-hidden">Male</span>
    </div>
  </div>
  <div class="fs-person-vitals">
    <div class="fs-person-vitals__name">
      <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
    </div>
    <div class="fs-person-vitals__fs-person-details">
      <div class="fs-person-details__container">
        <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1898-1921</span>
        <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
        <span class="fs-person-details__id" data-test="pid">3Gl9-B43</span>
        <span class="fs-person-details__selection-stopper"></span>
      </div>
    </div>
  </div>
</div>

Person with Portrait

Male
John Henry Doe
1900-1960  •  5XG4-L2Y

Female
Jane Allison Doe
1920-1980  •  8BA2-AL2

Gender unknown
Alex Doe
1898-1921  •  3Gl9-B43
Acceptable Usefor Person with Portrait

Use a person portrait to show an image of the person. If no image is available, a large gender icon will be used as a placeholder.

<div class="fs-person-portrait">
  <div class="fs-person-portrait__container">
    <div class="fs-person-portrait__portrait fs-couple__connector fs-icon-before fs-icon-large-male"></div>
  </div>
  <div class="fs-person-portrait__gender-wrapper">
    <div class="fs-person-gender">
      <div class="fs-person-gender__container fs-person-gender--small">
        <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-small-male">
          <span class="visually-hidden">Male</span>
        </div>
      </div>
      <div class="fs-person-vitals">
        <div class="fs-person-vitals__name">
          <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
        </div>
        <div class="fs-person-vitals__fs-person-details">
          <div class="fs-person-details__container">
            <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1900-1960</span>
            <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
            <span class="fs-person-details__id" data-test="pid">5XG4-L2Y</span>
            <span class="fs-person-details__selection-stopper"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Couple Relationship

Male
John Henry Doe
1900-1960  •  5XG4-L2Y
Female
Jane Allison Doe
1920-1980  •  8BA2-AL2
Acceptable Usefor Couple Relationship

Use a couple relationship to indicate a marriage between two persons.

<div class="fs-couple fs-couple--info">

  <div class="fs-person-gender fs-person--husband">
    <div class="fs-person-gender__container fs-person-gender--medium">
      <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-medium-male">
        <span class="visually-hidden">Male</span>
      </div>
    </div>
    <div class="fs-person-vitals">
      <div class="fs-person-vitals__name">
        <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
      </div>
      <div class="fs-person-vitals__fs-person-details">
        <div class="fs-person-details__container">
          <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1900-1960</span>
          <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
          <span class="fs-person-details__id" data-test="pid">5XG4-L2Y</span>
          <span class="fs-person-details__selection-stopper"></span>
        </div>
      </div>
    </div>
  </div>

  <div class="fs-person-gender fs-person--wife">
    <div class="fs-person-gender__container fs-person-gender--medium">
      <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-medium-female">
        <span class="visually-hidden">Female</span>
      </div>
    </div>
    <div class="fs-person-vitals">
      <div class="fs-person-vitals__name">
        <span class="fs-person-vitals__name-full" data-test="full-name">Jane Allison Doe</span>
      </div>
      <div class="fs-person-vitals__fs-person-details">
        <div class="fs-person-details__container">
          <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1920-1980</span>
          <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
          <span class="fs-person-details__id" data-test="pid">8BA2-AL2</span>
          <span class="fs-person-details__selection-stopper"></span>
        </div>
      </div>
    </div>
  </div>

</div>

Display Variations

fs-person--dark
Male
John Henry Doe
1900-1960  •  5XG4-L2Y
Inline - fs-person--inline
Male
John Henry Doe
1900-1960  •  5XG4-L2Y
Stacked - fs-person--stacked
Male
John Henry
Doe
John Henry Doe
1900-1960  •  5XG4-L2Y
<code>fs-person--dark</code></small>
<div class="fs-person-portrait fs-person--dark" style="background: #4d4d4a; padding: 5px;">
  <div class="fs-person-portrait__container">
    <div class="fs-person-portrait__portrait fs-couple__connector fs-icon-before fs-icon-large-male"></div>
  </div>
  <div class="fs-person-portrait__gender-wrapper">
    <div class="fs-person-gender">
      <div class="fs-person-gender__container fs-person-gender--small">
        <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-small-male">
          <span class="visually-hidden">Male</span>
        </div>
      </div>
      <div class="fs-person-vitals">
        <div class="fs-person-vitals__name">
          <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
        </div>
        <div class="fs-person-vitals__fs-person-details">
          <div class="fs-person-details__container">
            <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1900-1960</span>
            <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
            <span class="fs-person-details__id" data-test="pid">5XG4-L2Y</span>
            <span class="fs-person-details__selection-stopper"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<small class="example__title">Inline - <code>fs-person--inline</code></small>
<div class="fs-person-portrait fs-person--inline">
  <div class="fs-person-portrait__container">
    <div class="fs-person-portrait__portrait fs-couple__connector fs-icon-before fs-icon-large-male"></div>
  </div>
  <div class="fs-person-portrait__gender-wrapper">
    <div class="fs-person-gender">
      <div class="fs-person-gender__container fs-person-gender--small">
        <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-small-male">
          <span class="visually-hidden">Male</span>
        </div>
      </div>
      <div class="fs-person-vitals">
        <div class="fs-person-vitals__name">
          <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
        </div>
        <div class="fs-person-vitals__fs-person-details">
          <div class="fs-person-details__container">
            <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1900-1960</span>
            <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
            <span class="fs-person-details__id" data-test="pid">5XG4-L2Y</span>
            <span class="fs-person-details__selection-stopper"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<small class="example__title">Stacked - <code>fs-person--stacked</code></small>
<div class="fs-person-portrait fs-person--stacked">
  <div class="fs-person-portrait__container">
    <div class="fs-person-portrait__portrait fs-couple__connector fs-icon-before fs-icon-large-male"></div>
  </div>
  <div class="fs-person-portrait__gender-wrapper">
    <div class="fs-person-gender">
      <div class="fs-person-gender__container fs-person-gender--small">
        <div class="fs-person-gender__image fs-couple__connector fs-icon fs-icon-small-male">
          <span class="visually-hidden">Male</span>
        </div>
      </div>
      <div class="fs-person-vitals">
        <div class="fs-person-vitals__name fs-person-vitals__name--eurotypic">
          <span class="fs-person-vitals__name--split">
            <span class="fs-person-vitals__name-given" data-test="given-name">John Henry</span><br>
            <span class="fs-person-vitals__name-family" data-test="family-name">Doe</span>
          </span>
          <span class="fs-person-vitals__name-full" data-test="full-name">John Henry Doe</span>
        </div>
        <div class="fs-person-vitals__fs-person-details">
          <div class="fs-person-details__container">
            <span class="fs-person-details__lifeSpan" data-test="lifeSpan">1900-1960</span>
            <span class="fs-person-details__separator">&nbsp;&nbsp;</span>
            <span class="fs-person-details__id" data-test="pid">5XG4-L2Y</span>
            <span class="fs-person-details__selection-stopper"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>