Department of Labor Logo United States Department of Labor
Dot gov

The .gov means it's official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

QCT Test Program
PRINT:Print
XYZ XYZ Program Links
These features are for regular CMS-generated pages only

 

Tables

View the BLS Table Layouts (Tables in Basic Layout)

 

Future News Release Layouts

 

Important Stylesheets Default styled elements - Announcements
Notices
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non
  • class="announcement"
Attention
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non
  • class="announcement red"

IMPORTANT

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non
  • class="announcement yellow"

Formatting for above "Announcements"

<div class="announcement">
   <strong class="announcement-heading">Notices</strong>
   <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula,
      tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non</li>
   </ul>
</div>

 

Default styled elements - Page elements

508-compliant Heading
<span class="heading">Generic Heading </span>
<span class="heading"><a href="#">Generic Heading Link</a></span>

508-compliant Sub-heading
<span class="heading-2">Generic Sub-heading </span>
<span class="heading-2"><a href="#">Generic Sub-heading Link</a></span>

508-compliant Heading Generic Heading Generic Heading Link
508-compliant Sub-heading Generic Sub-heading Generic Sub-heading Link

Heading 1

Heading 1 Link

Heading 2

Heading 2 Link

Heading 3

Heading 3 Link

Heading 4

Heading 4 Link

Heading 5
Heading 5 Link
Heading 6
Heading 6 Link

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Paragraph tag. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, Link example libero.

Paragraph with class="alignCenter".

Paragraph with class="alignRight".

Back to Top iconBack to Top

Back to Top iconBack to Top

** Instructions to duplicate sticky "Back to top"
the following code should be copied to the page
<!--#include virtual="/include/global/back-to-top.stm"-->

<script>
 $(document).ready(function(){
  var $backToTop=$("#page-top-link");
  var back_to_top_location = $backToTop.position().top;
  var footerHeight = $(document).height() - $("#footer-primary-wrapper").position().top + 100
  var $pageTopLink= $backToTop.find('a');
  var offsetLeft=$pageTopLink.offset().left;
  $(window).scroll(function(){
   if($(window).scrollTop() > back_to_top_location && $(document).height() - ($(window).scrollTop() + $(window).height()) > footerHeight){
   $pageTopLink.css({"position":"fixed","bottom":"10px" ,"left": offsetLeft+"px"})
   }
   else if($(document).height() - ($(window).scrollTop() + $(window).height()) < footerHeight ){
   var back_to_top_bottom = footerHeight + ($(window).scrollTop() + $(window).height()) - $(document).height();
   $pageTopLink.css({"position":"fixed","bottom":back_to_top_bottom+"px"}) ;
    }
   else if($(window).scrollTop() <= back_to_top_location){
   $pageTopLink.css({"position":"relative", "bottom":"auto" ,"left": "auto"});
   }
   });
  });
</script>

Blockquote Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non.

UPDATED
REVISED
IMPORTANT
NEW
OTHER
NOTICE
EMERGENCY
MESSAGE
WARNING
ERROR
HIGHLIGHT

  • Unordered List Item 1
    • Sub Item 1
      • Sub Item 1.1
      • Sub Item 1.2
        • Sub Item 1.2a
        • Sub Item 1.2b
      • Sub Item 1.3
    • Sub Item 2
      • Sub Item 2.1
      • Sub Item 2.2
      • Sub Item 2.3
  1. Ordered List Item 1 Link
  2. Ordered List Item 2
  3. Ordered List Item 3
DT - Definition Term Link
DD - Definition List Item 3
DD - Definition List Item 3

 

White Anchor Button »

Green Anchor Button »

Red Anchor Button »

Gray Anchor Button »

Blue Anchor Button »


.SVG ICONS

We've integrated the icons from uswds into the bls. You can see some docs here: https://designsystem.digital.gov/components/icon/

Instructions to use:

- Click on the icon you need in above link, you will see the text "Copied to clipboard!" .

- Paste it to your page and change the direction from
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> <use xlink:href="/assets/img/sprite.svg#comment"></use></svg>
to
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> <use xlink:href="/assets/uswds/sprite.svg#comment"></use></svg>

- Need to turn the icon's color to white? add class "white" to class="usa-icon". like this: class="usa-icon white".

Followings are some examples:

Green Anchor Button

Comment

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et,

test 1 test 2

test@bls.com

222-333-5555

NC-04/04/2024 Total nonfarm payroll employment increased by 199,000 in November, and the unemployment rate edged down to 3.7 percent. Job gains occurred in health care and government.Employment also increased in manufacturing, reflecting the return of workers from a strike. Employment in retail...

Back to Top

next

search

 

Tooltip / Tool Tip

Formatting
<a class="tooltip-label" title="Tooltip Title" rel="Tooltip definition." href="#" >Tooltip visible text</a>

Add the below script to the page
<script>
  $(document).ready(function(){
    $(".tooltip-label").tooltip().click(function(e){ e.preventDefault();});
  });
</script>


** Instructions to duplicate "on this page" section
give it bold class if you would like items to be bold
<div class="highlight-box-blue in-this-page bold">
 <span class="heading">On This Page</span>
 <div class="in-this-page-content">
column one
  <ul>
   <li><a href="#">li.anchor1</a></li>
   <li><a href="#">li.anchor2</a></li>
   <li><a href="#">li.anchor3</a></li>
  </ul>
column one
column two
  <ul>
   <li><a href="#">li.anchor1</a></li>
   <li><a href="#">li.anchor2</a></li>
  </ul>
column two
 </div>
</div>






** Instructions to duplicate "A - Z Index" section
The entire Javascript code should be inserted to html file's <head> section
Note:Please make sure when you copied entire html/javascrip code in your html file, the "letters panel" on right side should stick to the top of screen when you scroll through the list. like following sample. (in all browsers).
<script>
/* A to Z sticky box IE support script*/
$(document).ready(function(){
if (window.document.documentMode) { // If it's IE, Do IE stuff
var $fixedBx =$('.a-z-theme > .a-z-buttons');
var fixedBxW=$fixedBx.width()+'px';
var $fixedbxPar =$fixedBx.parent();
var topLimit=Math.ceil($fixedbxPar.offset().top);
var winScrollTop =0;
$fixedBx.wrap( '<div style="width:'+fixedBxW+'"></div>' ).css({"width" : fixedBxW});
$(window).on('scroll', function() {
winScrollTop=$(this).scrollTop();
if (winScrollTop > topLimit && winScrollTop < topLimit + $fixedbxPar.height()-$fixedBx.height()) { $fixedBx.css({"position" : "fixed" });}
else $fixedBx.css({"position" : "static" });
});
}
});
/* A to Z sticky box IE support script*/
</script>

** HTML Section

<div class="a-z-theme">
 <div class="a-z-buttons">
  <a href="#0-9">0-9</a>
  <a href="#A">A</a>
  <a href="#B">B</a>
  <a href="#C">C</a>
  .
  .
  <a href="#Z">Z</a>
  <a href="#top" title="Jump to Top"><img src="/images/topdoc.gif" alt="Back to Top icon">Back to Top</a>
 </div>
 <div class="a-z-list">
  <div class="a-z-list-box">
   <span class="heading" id="0-9">0-9 </span>
   <ul>
    <li><a href="#">0-9 li.anchor1</a></li>
    <li><a href="#">0-9 li.anchor2</a></li>
   </ul>
  </div>
  <div class="a-z-list-box">
   <span class="heading" id="A">A </span>
   <ul>
    <li><a href="#">A li.anchor1</a></li>
    <li><a href="#">A li.anchor2</a></li>
   </ul>
  </div>
  <div class="a-z-list-box">
   <span class="heading" id="B">B </span>
   <ul>
    <li><a href="#">B li.anchor1</a></li>
    <li><a href="#">B li.anchor2</a></li>
   </ul>
  </div>
  .
  .
  <div class="a-z-list-box">
   <span class="heading" id="Z">Z </span>
   <ul>
    <li><a href="#">Z li.anchor1</a></li>
    <li><a href="#">Z li.anchor2</a></li>
   </ul>
  </div>
 </div>
</div>

0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Back to Top iconBack to Top

** Instructions to duplicate "State list" section
The entire Javascript code should be inserted to html file's <head> section
Note:Please make sure when you copied entire html/javascrip code in your html file, the "letters panel" on right side should stick to the top of screen when you scroll through the list. like following sample. (in all browsers).
<script>
/* State list sticky box IE support script*/
$(document).ready(function(){
if (window.document.documentMode) { // If it's IE, Do IE stuff
var $fixedBx2 =$('.statesMap > .a-z-buttons');
var fixedBxW2=$fixedBx2.width()+'px';
var $fixedbxPar2 =$fixedBx2.parent();
var topLimit2=Math.ceil($fixedbxPar2.offset().top);
var winScrollTop2 =0;
$fixedBx2.wrap( '<div style="width:'+fixedBxW2+'"></div>' ).css({"width" : fixedBxW2});
$(window).on('scroll', function() {
winScrollTop2=$(this).scrollTop();
if (winScrollTop2 > topLimit2 && winScrollTop2 < topLimit2 + $fixedbxPar2.height()-$fixedBx2.height()) { $fixedBx2.css({"position" : "fixed" });}
else $fixedBx2.css({"position" : "static" });
});
}
});
/* State list sticky box IE support script*/
</script>

** HTML Section

<div class="a-z-theme statesMap">
 <div class="a-z-buttons">
  <a href="#AL">AL</a>
  <a href="#AK">AK</a>
  <a href="#AR">AR</a>
  <a href="#AZ">AZ</a>
  <a href="#CA">CA</a>
  <a href="#CT">CT</a>
  <a href="#CO">CO</a>
  <a href="#DC">DC</a>
  <a href="#DE">DE</a>
  <a href="#FL">FL</a>
  <a href="#GA">GA</a>
  <a href="#GU">GU</a>
  <a href="#HI">HI</a>
  <a href="#IA">IA</a>
  <a href="#ID">ID</a>
  <a href="#IL">IL</a>
  <a href="#IN">IN</a>
  <a href="#KS">KS</a>
  <a href="#KY">KY</a>
  <a href="#LA">LA</a>
  <a href="#MA">MA</a>
  <a href="#MD">MD</a>
  <a href="#ME">ME</a>
  <a href="#MI">MI</a>
  <a href="#MN">MN</a>
  <a href="#MO">MO</a>
  <a href="#MS">MS</a>
  <a href="#MT">MT</a>
  <a href="#NC">NC</a>
  <a href="#ND">ND</a>
  <a href="#NE">NE</a>
  <a href="#NH">NH</a>
  <a href="#NJ">NJ</a>
  <a href="#NM">NM</a>
  <a href="#NV">NV</a>
  <a href="#NY">NY</a>
  <a href="#OH">OH</a>
  <a href="#OK">OK</a>
  <a href="#OR">OR</a>
  <a href="#PA">PA</a>
  <a href="#PR">PR</a>
  <a href="#RI">RI</a>
  <a href="#SC">SC</a>
  <a href="#SD">SD</a>
  <a href="#TX">TX</a>
  <a href="#UT">UT</a>
  <a href="#VA">VA</a>
  <a href="#VI">VI</a>
  <a href="#VT">VT</a>
  <a href="#WI">WI</a>
  <a href="#WA">WA</a>
  <a href="#WI">WI</a>
  <a href="#WV">WV</a>
  <a href="#top" title="Jump to Top"><img src="/images/topdoc.gif" alt="Back to Top icon">Back to Top</a>
 </div>
 <div class="a-z-list">
  <div class="a-z-list-box">
   <span class="heading" id="AL">Alabama</span>
   <ul>
    <li><a href="#"> li.anchor1</a></li>
    <li><a href="#">li.anchor2</a></li>
   </ul>
  </div>
  <div class="a-z-list-box">
   <span class="heading" id="AK">Alaska </span>
   <ul>
    <li><a href="#">li.anchor1</a></li>
    <li><a href="#">li.anchor2</a></li>
   </ul>
  </div>
  <div class="a-z-list-box">
   <span class="heading" id="AZ">Arizona </span>
   <ul>
    <li><a href="#">li.anchor1</a></li>
    <li><a href="#">li.anchor2</a></li>
   </ul>
  </div>
  <div class="a-z-list-box">
   <span class="heading" id="AR">Arkansas </span>
   <ul>
    <li><a href="#">li.anchor1</a></li>
    <li><a href="#">li.anchor2</a></li>
   </ul>
  </div>
  .
  .
 </div>
</div>

Alabama
Arkansas
Connecticut
Guam
Idaho
Iowa
Kansas
Kentucky
Louisiana
Maine
Mississippi
Montana
Nebraska
Nevada
New Hampshire
New Mexico
New York
North Carolina
North Dakota
Oklahoma
Oregon
Puerto Rico
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virgin Islands
Wyoming

Content Box Head - H5

Heading 1

Heading 1 Link

Heading 2

Heading 2 Link

Heading 3

Heading 3 Link

Heading 4

Heading 4 Link

Heading 5
Heading 5 Link
Heading 6
Heading 6 Link

Paragraph Text. Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non.

Paragraph Text Center Align "alignCenter". Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non.

Paragraph Text Right Align "alignRight". Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non.

Blockquote Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero. Phasellus non.

  • Unordered List Item 1 Link
  • Unordered List Item 2
  • Unordered List Item 3
  1. Ordered List Item 1 Link
  2. Ordered List Item 2
  3. Ordered List Item 3
Definition List Item 1 Link
Definition List Item 3
Definition List Item 3

 

Tab 2

this is the tab panel using bootstrap. JS code below can be used if it's needed.

$(document).ready(function(){ $(".nav-tabs > a").click(function(){ $(this).tab('show'); });

 

Blue Tab 1a content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.

 

Blue Tab 2a content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.

Blue Tab 3a content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.

Blue Tab 4a content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.

Blue Tab 5a content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.

 

Content Tab

Content Tab Body

div class="content-tab-highlight-outer"
div class="content-tab-highlight-inner"

Heading 3

  • To be used to highlight a block within the "Content Tab Body."
  • First create a DIV with the "content-tab-highlight-outer" class. This creates the grey outline.
  • Then create a DIV inside that with the "content-tab-highlight-inner" class. This creates the light blue box.

Paragraph - Content.

close div
close div

 

One column section

One column section heading

The one column section would ideally be used in the 1 column layout page template. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero.

To create this, you'll need to do the following:

  1. create a DIV with the class="one-col"
  2. create 3 DIVs inside of the first DIV
  3. insert content into each DIV

content 1

you can do "fun" things like adding images on top.

Two column section

 

Two column section heading

The two column section would ideally be used in the 1 column layout page template. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros ligula, tincidunt et, rhoncus id, malesuada nec, libero.

The code here can be anything you want. There will (most likely) be an H1 already in use on the top of the page, so using anything else in this div is fine.

To create this, you'll need to do the following:

  1. create a DIV with the class="two-col"
  2. create 2 DIVs (the second should have a class="last") inside of the first DIV
  3. insert content into each DIV

content 1

this is an alternative two column section where the 2 inner div's have padding and a border.

any other modifications can be applied with custom inline styles.

content 2

you can do "fun" things like adding images on top.

Three column section

Three column section heading

To create this, you'll need to do the following:

  1. create a DIV with the class="three-col"
  2. create 3 DIVs (the third should have a class="last") inside of the first DIV
  3. insert content into each DIV

the three column section would ideally be used in the 1 column layout page template.

three column section heading long title la la la la la

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

The code here can be anything you want. There will (most likely) be an H1 already in use on the top of the page, so using anything else in this div is fine.

content 1

this is an alternative three column section where the 3 inner div's have padding and a border.

any other modifications can be applied with custom inline styles.

content 2

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

content 3

you can do "fun" things like adding images on top.

Four column section

Four column section heading

To create this, you'll need to do the following:

  1. create a DIV with the class="four-col"
  2. create 4 DIVs (the third should have a class="last") inside of the first DIV
  3. insert content into each DIV

the four column section would ideally be used in the 1 column layout page template.

four column section heading long title la la la la la

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

four column section heading long title la la la la la

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

The code here can be anything you want. There will (most likely) be an H1 already in use on the top of the page, so using anything else in this div is fine.

content 1

this is an alternative four column section where the 4 inner div's have padding and a border.

any other modifications can be applied with custom inline styles.

content 2

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

content 3

Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

content 4

you can do "fun" things like adding images on top.

 

Randomizer Feature (lists)

Featured Factsheet

  1. Sample1 title1 here1

    This ".randomizer" feature is primarily being used like a feature-box for one article from a library. To use, create a surrounding DIV with the style="overflow:auto;", and any other additional styles desired. Then add the UL list with the class="randomizer". Each LI list item will represent an article item. On load, the page will randomly select one of these list items to be visible. This works with a minimum of one article.

    view factsheet »
  2. Sample2 title2 here2

    This ".randomizer" feature is primarily being used like a feature-box for one article from a library. To use, create a surrounding DIV with the style="overflow:auto;", and any other additional styles desired. Then add the UL list with the class="randomizer". Each LI list item will represent an article item. On load, the page will randomly select one of these list items to be visible. This works with a minimum of one article.

    view factsheet »
  3. Sample3 title3 here3

    This ".randomizer" feature is primarily being used like a feature-box for one article from a library. To use, create a surrounding DIV with the style="overflow:auto;", and any other additional styles desired. Then add the UL list with the class="randomizer". Each LI list item will represent an article item. On load, the page will randomly select one of these list items to be visible. This works with a minimum of one article.

    view factsheet »

Formatting for above "Randomizer"

<div style="overflow:auto;">
   ...content that should be on each item (title, heading, banner)...
   <ul class="randomizer">
      <li>...content for first item (text, images, links)...</li>
      <li>...content for second item (text, images, links)...</li>
      <li>...content for third item (text, images, links)...</li>
   </ul>
</div>

 

Graphic Boxes (lists)

Graphic boxes is available for use on the Unordered Lists (UL) element as a "fun" way to display lists differently. This uses Javascript to approximate a best fit based on the number of columns (data-col), and calculates the height to make all the boxes the same size.

To use, add the graphicBoxes class to the list element and how many columns as a data-col attribute. There should also be a <div class="clearfloat"></div> after the list element to stop the floating styles. The final code for a UL element with 3 columns should look like:
<ul class="graphicBoxes" data-col="3"> ... </ul> <div class="clearfloat"></div>

  • graphicBoxes listitem paragraph, 1

  • graphicBoxes listitem paragraph, 2

  • graphicBoxes listitem paragraph, 3

  • graphicBoxes listitem paragraph, 4

  • graphicBoxes listitem paragraph, 5

If using links, there is the option to add an additional class to the .graphicBoxes. Example class="graphicBoxes graphicLinks".

Or users can keep the links as they are. Example class="graphicBoxes".

 

Asides (sidebox content)
aside right

This is a paragraph inside of the aside content. It has a fixed width at 275px. This aside is floating "right". Here is a sample hyperlink within the text.

Additional Information

This is a left aligned paragraph inside of the aside content. Default styles are aligned left.

General setup

To use this new "aside" feature, simple add a <div> tag with the class of aside to the page. You will also add a class of right or left to help move the "aside" to one side of the page. Then add the appropriate heading and content classes. Don't forget to add a "clearfloat" after the aside.

Example for right:
<div class="aside right">
   [content]
</div>
<div class="clearfloat"></div>

tips and features

We have a "title" class which helps create a defined title block.

There are a couple ways to handle inline-images. You can simply place them into the "aside" directly (example below) or you can add a class of "wide" to help the image fill the space (example on right).

Hyperlinks should be formatted like this: <p or element><a href="link path">text goes here</a></p or /element>. Note, the <a> tag is inside of the paragraph tag, or other element you are using.

Lists help visually organize content. Below, we used both an unordered (bulleted) list <ul> at first, and then a class of "hr" on each <p> tag, creating grey lines. You could even just use separate <p> tags for an cleaner look.

When using the "aside left" combination, sometimes the lists outside can interact strangely with the aside feature. To help those lists act correctly, please add an inline style of "overflow:hidden;" to the list. For example: <ul style="overflow:hidden"> [list elements] </ul>. The below list of samples has the inline style applied.

aside left

This aside is floating "left". Below is filler content of various types."

Heading, h4 black
  • Unordered list item. Filler text here to vary the length of the element.
  • Below is a standard image in the aside.
Heading, h6 blue uppercase strong

This is a right aligned paragraph inside of the aside content.

This is a centered paragraph inside of the aside content.

This is a justified paragraph inside of the aside content.

Sample class styles

The "aside" examples shown here use a lot of the general classes available to help style the content. Use the developer tools (F12) to inspect the classes being used by each element. Here are a few more to help!

  • lowercase
  • capitalize
  • uppercase
  • h1 font-size 32px
  • h2 font-size 28px
  • h3 font-size 24px
  • h4 font-size 20px
  • h5 font-size 16px
  • h6 font-size 12px
  • red #990000
  • orange #954000
  • yellow #695805
  • green #0b6300
  • blue #183061
  • violet #4c2c92
  • black #000
  • strong "bold"
  • em "italic"
  • underline
  • no text decoration, including underline, strikethrough "line-through", or overline
  • Example: class="h4 violet underline"

 

YOUTUBE PLAYER / YOU TUBE

Please enable javascript to play this video.

Using the new class='youtube-player' format, more YouTube videos can be on one page without reduced load times.

This format needs 4 items:
  1. 1) class='youtube-player'
  2. 2) data-id attribute

    A YouTube URL has a unique code for each video. Examples:

    https://www.youtube.com/watch?v=o_JVfyvoa04

    https://youtu.be/o_JVfyvoa04

  3. 3) data-date attribute

    This can be used by our system for video ordering in some circumstances (Format: YYYYmmdd).

  4. 4) a Paragraph tag with the words "Please enable javascript to play this video." for pages without Javascript.
  5. •  Inline styles can be added to the outer DIV to help handle things such as width, margins/spacing, etc...

Basic formatting for faster loading videos

<div class="youtube-player" data-id="o_JVfyvoa04" data-date="20170217">
  <p>Please enable javascript to play this video.</p>
</div>

 

TRIANGLEEXPANDABLE / TRIANGLE EXPANDABLE SECTIONS

Below is for the .triangleExpandable sections. These are used for lists elements that have additional content under each item - such as a Question and Answer format. The "Expand All/ Collapse All" are optional per page, and affect the entire page. Both types of lists are acceptable (UL/OL). It is suggested that within the "answer" areas to use the LI tag like a paragraph, for ideal formatting. Each LI tag can have other HTML elements within, such as links, tables, and images. Below is an example and simple suggested formatting:

  1. Question text?
    • Answer text.
  2. How is the CPI market basket determined?
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. How is the CPI sample created?
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Col head 0 Col head 1
      Row head A content 1A
      Row head B content 1B
      Row head C content 1C

Simple suggested formatting for .triangeExpandable sections

<ol class="triangleExpandable"> <!--this could be a UL element instead-->
   <li>Question text A<span class="triangle" tabindex="0" title="Click to learn more">&rtrif;</span>
      <ul>
         <li>Answer text A.</ul>
      </ul>
   </li>
   <li>Question text B <span class="triangle" tabindex="0" title="Click to learn more">&rtrif;</span>
      <ol>
         <li>Answer text B1.</li>
         <li>Answer text B2.</li>
      </ol>
   </li>
   ...
</ol>

 

(TOC) EXPANDABLE ACCORDION SECTIONS

Create an Unordered List <UL> with the "accordionSections" class. Each List Item <LI> will be a "topic." This "topic" consists of...

  1. the denoted "accordionHeader" for the topic followed by...
  2. the other elements that will toggle on click.

This is the base functionality. Styles can be added directly to the page as needed to change the look of the function <UL>. The class "accordionScroll" can be added to any "accordionSections" to have those items auto-scroll-to the top of the window on click.

Be sure the page includes:

  1. bls.js or bls-1.11.0.min.js
  2. bls_combined.css
  3. bls_noscript.css
Example:
  • Visible topic content 1.
    Lorem Ipsum fusce placerat, diam ut lacinia convallis, augue enim blandit eros, ac pharetra neque sapien vitae quam. Vestibulum in eros sapien. Nulla ultrices augue at diam vehicula, sed ullamcorper nisl efficitur. Praesent sed ligula eleifend, facilisis tellus lobortis, posuere libero. Vivamus ullamcorper, tellus tincidunt dignissim tristique, ligula felis auctor purus, sed aliquam dolor ipsum ornare dolor. Vestibulum et eros egestas, pellentesque neque ut, scelerisque nulla. Fusce eget urna velit. Donec a turpis ut eros iaculis fringilla nec laoreet tellus. Ut luctus orci vitae turpis tempus, quis hendrerit mi molestie. In tellus ipsum, mattis eu vulputate sed, molestie accumsan justo. Mauris et viverra nisl. Pellentesque ullamcorper ornare lectus vel pellentesque. Cras condimentum nisi a pharetra ultrices. Proin convallis finibus nunc.
    accordion example image
    • This is an example of sub levels, with .accordionScoll
      ...content 1A...
    • topic 1B,, with .accordionScoll
      ...content 1B...
  • Visible topic content 2.
    Table example
    Col1 Col2
    A B
    Apple Banana
  • Visible topic content 3, plus additional elements using the "accordionHeader" class.
    Additional visible content 3.
    Lorem Ipsum fusce placerat, diam ut lacinia convallis, augue enim blandit eros, ac pharetra neque sapien vitae quam. Vestibulum in eros sapien. Nulla ultrices augue at diam vehicula, sed ullamcorper nisl efficitur. Praesent sed ligula eleifend, facilisis tellus lobortis, posuere libero. Vivamus ullamcorper, tellus tincidunt dignissim tristique, ligula felis auctor purus, sed aliquam dolor ipsum ornare dolor. Vestibulum et eros egestas, pellentesque neque ut, scelerisque nulla. Fusce eget urna velit. Donec a turpis ut eros iaculis fringilla nec laoreet tellus. Ut luctus orci vitae turpis tempus, quis hendrerit mi molestie. In tellus ipsum, mattis eu vulputate sed, molestie accumsan justo. Mauris et viverra nisl. Pellentesque ullamcorper ornare lectus vel pellentesque. Cras condimentum nisi a pharetra ultrices. Proin convallis finibus nunc.

Formatting for above examples, .accordionSections
<ul class="accordionSections">
   <li><span class="accordionHeader">Visible topic content 1.</span>
      <div>Lorem Ipsum ...content 1</div>
      <img alt="accordion example image" src="/images/layout/bls_125_banner.gif" style="background-color:#990000;">
   </li>
      <ul class="accordionSections accordionScroll">
         <li><span class="accordionHeader">This is an example of sub levels.</span>
               <div>...content 1A...</div>
         </li>
         <li><span class="accordionHeader">topic 1B.</span>
            <div>...content 1B...</div>
         </li>
      </ul>
   <li><span class="accordionHeader">Visible topic content 2.</span>
         <div>
         <table>
            <caption>Table example</caption>
            <thead>
               <tr>
                  <th>Col1</th>
                  <th>Col2</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>A</td>
                  <td>B</td>
               </tr>
               <tr>
                  <td>Apple</td>
                  <td>Banana</td>
               </tr>
            </tbody>
         </table>
      </div>
   </li>
   <li>
      <span class="accordionHeader">Visible topic content 3
         <div>Additional visible content 3.</div>
      </span>
      <div>Lorem Ipsum ...content 3...</div>
   </li>
</ul>

 

Prenumbered Code
   
{
  "status": "REQUEST_SUCCEEDED",
  "responseTime": 16,
  "message": [
    
  ],
  "Results": [
    {
      "series": [
        {
          "seriesID": "LAUCN040010000000005",
          "data": [
            {
              "year": "2013",
              "period": "M11",
              "periodName": "November",
              "value": "16393",
              "footnotes": [
                {
                  "code": "P",
                  "text": "Preliminary."
                }
              ]
            },
            {
              "year": "2013",
              "period": "M10",
              "periodName": "October",
              "value": "16536",
              "footnotes": [
                {
                 ...
                 }
              ]
            }
          ]
        }
      ]
    }
  ]
}

 

Overlay

Thickbox Pop-up Layer, Overlay

 

Entities

HTML Required Entities
Text Description Entity Name Named Entity Entity Number Numbered Entitiy
" quotation mark &quot; " &#34; "
' apostrophe  &apos; (does not work in IE) ' &#39; '
& ampersand &amp; & &#38; &
< less-than &lt; < &#60; <
> greater-than &gt; > &#62; >

 

Character Entities
Result Description Entity Name Entity Name Entity Number Entity Number
  non-breaking space &nbsp;   &#160;  
¡ inverted exclamation mark &iexcl; ¡ &#161; ¡
¢ cent &cent; ¢ &#162; ¢
£ pound &pound; £ &#163; £
¤ currency &curren; ¤ &#164; ¤
¥ yen &yen; ¥ &#165; ¥
¦ broken vertical bar &brvbar; ¦ &#166; ¦
§ section &sect; § &#167; §
¨ spacing diaeresis &uml; ¨ &#168; ¨
© copyright &copy; © &#169; ©
ª feminine ordinal indicator &ordf; ª &#170; ª
« angle quotation mark (left) &laquo; « &#171; «
¬ negation &not; ¬ &#172; ¬
­ soft hyphen &shy; ­ &#173; ­
® registered trademark &reg; ® &#174; ®
¯ spacing macron &macr; ¯ &#175; ¯
° degree &deg; ° &#176; °
± plus-or-minus  &plusmn; ± &#177; ±
² superscript 2 &sup2; ² &#178; ²
³ superscript 3 &sup3; ³ &#179; ³
´ spacing acute &acute; ´ &#180; ´
µ micro &micro; µ &#181; µ
paragraph &para; &#182;
· middle dot &middot; · &#183; ·
¸ spacing cedilla &cedil; ¸ &#184; ¸
¹ superscript 1 &sup1; ¹ &#185; ¹
º masculine ordinal indicator &ordm; º &#186; º
» angle quotation mark (right) &raquo; » &#187; »
¼ fraction 1/4 &frac14; ¼ &#188; ¼
½ fraction 1/2 &frac12; ½ &#189; ½
¾ fraction 3/4 &frac34; ¾ &#190; ¾
¿ inverted question mark &iquest; ¿ &#191; ¿
× multiplication &times; × &#215; ×
÷ division &divide; ÷ &#247; ÷

 

Symbol Entities
Result Description Entity Name Entity Name Entity Number Entity Number
À capital a, grave accent &Agrave; À &#192; À
Á capital a, acute accent &Aacute; Á &#193; Á
 capital a, circumflex accent &Acirc;  &#194; Â
à capital a, tilde &Atilde; à &#195; Ã
Ä capital a, umlaut mark &Auml; Ä &#196; Ä
Å capital a, ring &Aring; Å &#197; Å
Æ capital ae &AElig; Æ &#198; Æ
Ç capital c, cedilla &Ccedil; Ç &#199; Ç
È capital e, grave accent &Egrave; È &#200; È
É capital e, acute accent &Eacute; É &#201; É
Ê capital e, circumflex accent &Ecirc; Ê &#202; Ê
Ë capital e, umlaut mark &Euml; Ë &#203; Ë
Ì capital i, grave accent &Igrave; Ì &#204; Ì
Í capital i, acute accent &Iacute; Í &#205; Í
Î capital i, circumflex accent &Icirc; Î &#206; Î
Ï capital i, umlaut mark &Iuml; Ï &#207; Ï
Ð capital eth, Icelandic &ETH; Ð &#208; Ð
Ñ capital n, tilde &Ntilde; Ñ &#209; Ñ
Ò capital o, grave accent &Ograve; Ò &#210; Ò
Ó capital o, acute accent &Oacute; Ó &#211; Ó
Ô capital o, circumflex accent &Ocirc; Ô &#212; Ô
Õ capital o, tilde &Otilde; Õ &#213; Õ
Ö capital o, umlaut mark &Ouml; Ö &#214; Ö
Ø capital o, slash &Oslash; Ø &#216; Ø
Ù capital u, grave accent &Ugrave; Ù &#217; Ù
Ú capital u, acute accent &Uacute; Ú &#218; Ú
Û capital u, circumflex accent &Ucirc; Û &#219; Û
Ü capital u, umlaut mark &Uuml; Ü &#220; Ü
Ý capital y, acute accent &Yacute; Ý &#221; Ý
Þ capital THORN, Icelandic &THORN; Þ &#222; Þ
ß small sharp s, German &szlig; ß &#223; ß
à small a, grave accent &agrave; à &#224; à
á small a, acute accent &aacute; á &#225; á
â small a, circumflex accent &acirc; â &#226; â
ã small a, tilde &atilde; ã &#227; ã
ä small a, umlaut mark &auml; ä &#228; ä
å small a, ring &aring; å &#229; å
æ small ae &aelig; æ &#230; æ
ç small c, cedilla &ccedil; ç &#231; ç
è small e, grave accent &egrave; è &#232; è
é small e, acute accent &eacute; é &#233; é
ê small e, circumflex accent &ecirc; ê &#234; ê
ë small e, umlaut mark &euml; ë &#235; ë
ì small i, grave accent &igrave; ì &#236; ì
í small i, acute accent &iacute; í &#237; í
î small i, circumflex accent &icirc; î &#238; î
ï small i, umlaut mark &iuml; ï &#239; ï
ð small eth, Icelandic &eth; ð &#240; ð
ñ small n, tilde &ntilde; ñ &#241; ñ
ò small o, grave accent &ograve; ò &#242; ò
ó small o, acute accent &oacute; ó &#243; ó
ô small o, circumflex accent &ocirc; ô &#244; ô
õ small o, tilde &otilde; õ &#245; õ
ö small o, umlaut mark &ouml; ö &#246; ö
ø small o, slash &oslash; ø &#248; ø
ù small u, grave accent &ugrave; ù &#249; ù
ú small u, acute accent &uacute; ú &#250; ú
û small u, circumflex accent &ucirc; û &#251; û
ü small u, umlaut mark &uuml; ü &#252; ü
ý small y, acute accent &yacute; ý &#253; ý
þ small thorn, Icelandic &thorn; þ &#254; þ
ÿ small y, umlaut mark &yuml; ÿ &#255; ÿ

 

Math Symbols Supported by HTML
Result Description Entity Name Entity Number Entity Name Entity Number
for all &forall; &#8704;
part &part; &#8706;
exists &exists; &exists; &#8707;
empty &empty; &#8709;
nabla &nabla; &#8711;
isin &isin; &#8712;
notin &notin; &#8713;
ni &ni; &#8715;
prod &prod; &#8719;
sum &sum; &#8721;
minus &minus; &#8722;
lowast &lowast; &#8727;
square root &radic; &#8730;
proportional to &prop; &#8733;
infinity &infin; &#8734;
angle &ang; &#8736;
and &and; &#8743;
or &or; &#8744;
cap &cap; &#8745;
cup &cup; &#8746;
integral &int; &#8747;
therefore &there4; &#8756;
simular to &sim; &#8764;
approximately equal &cong; &#8773;
almost equal &asymp; &#8776;
not equal &ne; &#8800;
equivalent &equiv; &#8801;
less or equal &le; &#8804;
greater or equal &ge; &#8805;
subset of &sub; &#8834;
superset of &sup; &#8835;
not subset of &nsub; &#8836;
subset or equal &sube; &#8838;
superset or equal &supe; &#8839;
circled plus &oplus; &#8853;
cirled times &otimes; &#8855;
perpendicular &perp; &#8869;
dot operator &sdot; &#8901;

 

Greek Letters Supported by HTML
Result Description Entity Name Entity Number Entity Name Entity Number
Α Alpha Α Α &Alpha; &#913;
Β Beta Β Β &Beta; &#914;
Γ Gamma Γ Γ &Gamma; &#915;
Δ Delta Δ Δ &Delta; &#916;
Ε Epsilon Ε Ε &Epsilon; &#917;
Ζ Zeta Ζ Ζ &Zeta; &#918;
Η Eta Η Η &Eta; &#919;
Θ Theta Θ Θ &Theta; &#920;
Ι Iota Ι Ι &Iota; &#921;
Κ Kappa Κ Κ &Kappa; &#922;
Λ Lambda Λ Λ &Lambda; &#923;
Μ Mu Μ Μ &Mu; &#924;
Ν Nu Ν Ν &Nu; &#925;
Ξ Xi Ξ Ξ &Xi; &#926;
Ο Omicron Ο Ο &Omicron; &#927;
Π Pi Π Π &Pi; &#928;
Ρ Rho Ρ Ρ &Rho; &#929;
  Sigmaf   undefined   undefined
Σ Sigma Σ Σ &Sigma; &#931;
Τ Tau Τ Τ &Tau; &#932;
Υ Upsilon Υ Υ &Upsilon; &#933;
Φ Phi Φ Φ &Phi; &#934;
Χ Chi Χ Χ &Chi; &#935;
Ψ Psi Ψ Ψ &Psi; &#936;
Ω Omega Ω Ω &Omega; &#937;
           
α alpha α α &alpha; &#945;
β beta β β &beta; &#946;
γ gamma γ γ &gamma; &#947;
δ delta δ δ &delta; &#948;
ε epsilon ε ε &epsilon; &#949;
ζ zeta ζ ζ &zeta; &#950;
η eta η η &eta; &#951;
θ theta θ θ &theta; &#952;
ι iota ι ι &iota; &#953;
κ kappa κ κ &kappa; &#954;
λ lambda λ Λ &lambda; &#923;
μ mu μ μ &mu; &#956;
ν nu ν Ν &nu; &#925;
ξ xi ξ ξ &xi; &#958;
ο omicron ο ο &omicron; &#959;
π pi π π &pi; &#960;
ρ rho ρ ρ &rho; &#961;
ς sigmaf ς ς &sigmaf; &#962;
σ sigma σ σ &sigma; &#963;
τ tau τ τ &tau; &#964;
υ upsilon υ υ &upsilon; &#965;
φ phi φ φ &phi; &#966;
χ chi χ χ &chi; &#967;
ψ psi ψ ψ &psi; &#968;
ω omega ω ω &omega; &#969;
           
ϑ theta symbol ϑ ϑ &thetasym; &#977;
ϒ upsilon symbol ϒ ϒ &upsih; &#978;
ϖ pi symbol ϖ ϖ &piv; &#982;

 

Some Other Entities Supported by HTML
Result Description Entity Name Entity Number Entity Name Entity Number
Œ capital ligature OE Œ Œ &OElig; &#338;
œ small ligature oe œ œ &oelig; &#339;
Š capital S with caron Š Š &Scaron; &#352;
š small S with caron š š &scaron; &#353;
Ÿ capital Y with diaeres Ÿ Ÿ &Yuml; &#376;
ƒ f with hook ƒ ƒ &fnof; &#402;
ˆ modifier letter circumflex accent ˆ ˆ &circ; &#710;
˜ small tilde ˜ ˜ &tilde; &#732;
en space &ensp; &#8194;
em space &emsp; &#8195;
thin space &thinsp; &#8201;
zero width non-joiner &zwnj; &#8204;
zero width joiner &zwj; &#8205;
left-to-right mark &lrm; &#8206;
right-to-left mark &rlm; &#8207;
en dash &ndash; &#8211;
em dash &mdash; &#8212;
left single quotation mark &lsquo; &#8216;
right single quotation mark &rsquo; &#8217;
single low-9 quotation mark &sbquo; &#8218;
left double quotation mark &ldquo; &#8220;
right double quotation mark &rdquo; &#8221;
double low-9 quotation mark &bdquo; &#8222;
dagger &dagger; &#8224;
double dagger &Dagger; &#8225;
bullet &bull; &#8226;
horizontal ellipsis &hellip; &#8230;
per mille  &permil; &#8240;
minutes &prime; &#8242;
seconds &Prime; &#8243;
single left angle quotation &lsaquo; &#8249;
single right angle quotation &rsaquo; &#8250;
overline &oline; &#8254;
euro &euro; &#8364;
trademark &trade; &#8482;
left arrow &larr; &#8592;
up arrow &uarr; &#8593;
right arrow &rarr; &#8594;
down arrow &darr; &#8595;
left right arrow &harr; &#8596;
carriage return arrow &crarr; &#8629;
left ceiling &lceil; &#8968;
right ceiling &rceil; &#8969;
left floor &lfloor; &#8970;
right floor &rfloor; &#8971;
lozenge &loz; &#9674;
spade &spades; &#9824;
club &clubs; &#9827;
heart &hearts; &#9829;
diamond &diams; &#9830;

£

¥



©
®