Formatting
beta

Content

CTAs

Two CTAs of unequal value

Cupidatat domesticarum est quibusdam in cillum id eiusmod ut noster. Legam reprehenderit proident aute fabulas, o quid sempiternum est proident sunt legam commodo velit, esse imitarentur admodum fugiat quibusdam. Malis si aut culpa ullamco ita cernantur ipsum ullamco, ad anim proident, ipsum appellat te.

Cupidatat domesticarum est quibusdam in cillum id eiusmod ut noster. Legam reprehenderit proident aute fabulas, o quid sempiternum est proident sunt legam commodo velit, esse imitarentur admodum fugiat quibusdam. Malis si aut culpa ullamco ita cernantur ipsum ullamco, ad anim proident, ipsum appellat te.

done
close

Two CTAs of equal value

Cupidatat domesticarum est quibusdam in cillum id eiusmod ut noster. Legam reprehenderit proident aute fabulas, o quid sempiternum est proident sunt legam commodo velit, esse imitarentur admodum fugiat quibusdam. Malis si aut culpa ullamco ita cernantur ipsum ullamco, ad anim proident, ipsum appellat te.

Cupidatat domesticarum est quibusdam in cillum id eiusmod ut noster. Legam reprehenderit proident aute fabulas, o quid sempiternum est proident sunt legam commodo velit, esse imitarentur admodum fugiat quibusdam. Malis si aut culpa ullamco ita cernantur ipsum ullamco, ad anim proident, ipsum appellat te.

done
close

Dates

Full format

Dec 30, 2019 (Mon DD, YYYY)

Condensed format

12/20/2019 (MM/DD/YYYY)

Full list of month abbrevations

  • January - Jan
  • February - Feb
  • March - Mar
  • April - Apr
  • May - May
  • June - Jun
  • July - Jul
  • August - Aug
  • September - Sep
  • October - Oct
  • November - Nov
  • December - Dec
done
Use a preceding zero for single digit dates, ie. 01, 02, 03 etc.
done
Use the full format if there is enough space. Otherwise, use the condensed format.

Expand/collapse

[Some content]

.96em
ɪ

[Some content]

done
The label of the expand/collapse is the link color. The arrow is not a link color.
done
Clicking anywhere on the label or the arrow opens or closes the expand/collapse.
done
The label can be any standard text size.
close
Do not use .medium-header with the prospect font.
close
Do not use .extra-extra-large-header with the customer font.

Label/data pair

Featured

Volume
3,770,693
label label-large
Volume
medium-header
3,770,693

Normal

Previous Close
$166.84
label label-large
Previous Close
text-bold
$166.84

Phone numbers

123-456-7890
done
Always use the area code.
close
Never use parenthesis around the area code.

Quote lookups

Basic lookup

PMDV Polymedia Division
$193.47 + 2.68 (0.64%)
PMDV Polymedia Division
$193.47 - 2.68 (-0.64%)

Search result

PMDV Polymedia Division
  • NASDAQ
  • 15-Minute Quote Delay
  • $193.47
  • arrow_drop_up+ 2.68 (0.64%)
  • Volume: 16,505,233
PMDV Polymedia Division
  • NASDAQ
  • 15-Minute Quote Delay
  • $193.47
  • arrow_drop_down- 2.68 (-0.64%)
  • Volume: 16,505,233

Refresh

Delayed quotes

Data delayed as of 10:56 AM ET
Get real-time quotes

Real-time quotes

refreshRefresh Dec 30, 2018, 1:34 PM ET

Stock data

Percentage change

+ 2.68 (0.64%)
- 2.68 (-0.64%)
done
Always use +/- to indicate whether the change is positive or negative.

Price

$193.47
done
Always include the price to the hundredth decimal place.

Telephone numbers

123-456-7890

Time

1:43 PM ET
close
Don't use 24 hour time. Use AM/PM.
close
Don't use leading zeroes (use 1:43 PM, not 01:43PM)
done
Always use a time zone.

Timestamps

Dec 30, 2019, 1:43 PM ET
done
Put the date first, then the time.

Utility nav

One action

settings Settings
15px
ɪ settingsxsSettings

Multiple actions

done
If there are multiple actions in the nav aside from refresh, only use icons. if there is only one action, use the icon + label pair.

Search

close