IceGroupWeb CSS Guide

8.1 #Lists.Column-List Column lists

column-list

Position lists in one, two, three, or four columns by wrapping them in a div with class column-list and applying column-list-full, column-list-half, column-list-third, or column-list-quarter to the lists.

Example

One
Two
Three

One
Two
Three

One
Two
Three

  <div class="column-list">
    <ul class="column-list-third list">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    <ul class="column-list-third list">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    <ul class="column-list-third list">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>

8.2 #Lists.Description-Lists Description Lists lists

dl

Examples

Default styling

One: Un
Two: Deux
Three: Troi

dl-horizontal

Horizontal alignment

One: Un
Two: Deux
Three: Troi

<dl class="dl [modifier class]">
  <dt>One</dt>
  <dd>Un</dd>
  <dt>Two</dt>
  <dd>Deux</dd>
  <dt>Three</dt>
  <dd>Troi</dd>
</dl>

8.2.1 #Lists.Description-Lists.Metadata Metadata lists

metadatalist

Examples

Default styling

One: Un
Two: Deux
Three: Troi

metadatalist-stacked

Stack list items vertically

One: Un
Two: Deux
Three: Troi

<dl class="metadatalist [modifier class]">
  <dt>One</dt>
  <dd>Un</dd>
  <dt>Two</dt>
  <dd>Deux</dd>
  <dt>Three</dt>
  <dd>Troi</dd>
</dl>

8.2.2 #Lists.Description-Lists.Split Split lists

dl-split

This will put the term on the left and the definition on the right. Use a container such as a grid column to constrain the overall width if necessary.

Example

One: Un
Two: Deux
Three: Troi

<dl class="dl-split">
  <dt>One</dt>
  <dd>Un</dd>
  <dt>Two</dt>
  <dd>Deux</dd>
  <dt>Three</dt>
  <dd>Troi</dd>
</dl>

8.3 #Lists.Document Document list

document-list, item-pdf, item-doc, item-excel

For use on Product Spec pages. This is intended for a list of links. It will automatically ads icons beside the link, indicating the filetype.

File type is detected automatically. Use an item-* class on the <li> to explicitly set an icon type.

Example

  <ul class="document-list">
    <li><a href="http://example.com/example.pdf">Link to PDF</a></li>
    <li><a href="http://example.com/example.doc">Link to DOC/DOCX</a></li>
    <li><a href="http://example.com/example.csv">Link to CSV/XLS</a></li>
    <li><a href="http://example.com/example.txt">Link to other file type</a></li>
  </ul>

Example

Show Markup

  <ul class="document-list">
    <li class="item-pdf"><a href="#">Link to PDF</a></li>
    <li class="item-doc"><a href="#">Link to DOC/DOCX</a></li>
    <li class="item-excel"><a href="#">Link to CSV/XLS</a></li>
  </ul>

8.4 #Lists.Featured Featured

list-featured, list-featured-inline

For use where multiple lists are placed together. Label each featured list with a subheader.

Example

Asset classes

  <p class="subheader">Asset classes</p>
  <ul class="list-featured">
    <li><a href="#">Energy</a></li>
    <li><a href="#">Interest rates</a></li>
    <li><a href="#">Agriculture</a></li>
    <li><a href="#">Equity index</a></li>
  </ul>

Example

Show Markup

  <ul class="list-featured-inline">
    <li><a href="#">Energy</a></li>
    <li><a href="#">Interest rates</a></li>
    <li><a href="#">Agriculture</a></li>
    <li><a href="#">Equity index</a></li>
  </ul>

8.5 #Lists.Grid-List Grid List

Example

<ul class="grid-list">
  <li><a href="#">Product<br>Specs</a></li>
  <li><a href="#">Hours</a></li>
  <li><a href="#">Holidays</a></li>
  <li><a href="#">Expiry<br>Calendar</a></li>
  <li><a href="#">Fees</a></li>
  <li><a href="#">Margins</a></li>
  <li><a href="#">Subscriptions</a></li>
  <li><a href="#">Instant<br>Messaging</a></li>
  <li><a href="#">System<br>Alerts</a></li>
</ul>

8.6 #Lists.Inline Inline

list-inline

Example

<ul class="list-inline">
  <li><a href="#">ICE</a></li>
  <li>NYSE</li>
  <li><a href="#">Intercontinental Exchange</a></li>
</ul>

8.6.1 #Lists.Inline.Separated Inline Separated

list-inline-separated

Example

  <ul class="list-inline-separated">
    <li><a href="#">ICE</a></li>
    <li>NYSE</li>
    <li><a href="#">Intercontinental Exchange</a></li>
  </ul>

8.6.2 #Lists.Inline.Spaced Inline Spaced

list-inline-spaced

Example

  <ul class="list-inline-spaced">
    <li><a href="#">ICE</a></li>
    <li>NYSE</li>
    <li><a href="#">Intercontinental Exchange</a></li>
  </ul>

8.6.3 #Lists.Inline.Span Inline Span

list-inline-span

Spaced the items evenly across available space.

Example

  <ul class="list-inline-span">
    <li><a href="#">About ICE</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Investors</a></li>
    <li><a href="#">IPO Center</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Cookies</a></li>
  </ul>

8.7 #Lists.Report Report List

report-list

This is similar to the Document List, but without file icons. For use on Product Spec pages.

Example

  <ul class="report-list">
    <li><a href="/reportCenter#report/1">Report 1</a></li>
    <li><a href="/reportCenter#report/2">Report 2</a></li>
    <li><a href="/reportCenter#report/3">Report 3</a></li>
  </ul>

8.8 #Lists.Special Special lists lists

These are a series of special list types. Most of these are designed for use in a particular place in the website.

8.8.1 #Lists.Special.Action Action List lists

actionlist

List of actionable items, floated to the right.

Place immediately before a secondary-header to place the actions inline with the header. The margin of a preceeding element can affect their alignment; wrap the both the actionlist and the header in a <div> to prevent this.

Example

27-Feb-2014

<ul class="actionlist">
  <li>
    <button class="btn btn-link">
      <i class="sprite sprite-excel"></i>Export to Excel
    </button>
  </li>
  <li>
    <button class="btn btn-link">
      <i class="sprite sprite-print"></i>Print
    </button>
  </li>
  <li>
    27-Feb-2014
  </li>
</ul>

Example

27-Feb-2014

header

Show Markup

<div>
  <ul class="actionlist">
    <li>
      <button class="btn btn-link">
        <i class="sprite sprite-excel"></i>Export to Excel
      </button>
    </li>
    <li>
      <button class="btn btn-link">
        <i class="sprite sprite-print"></i>Print
      </button>
    </li>
    <li>
      27-Feb-2014
    </li>
  </ul>
  <p class="secondary-header">header</p>
</div>

8.8.2 #Lists.Special.Big-Numbers Big Numbers lists

big-numbers

Example

First item
Second item
Third item

<ol class="big-numbers">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

8.8.3 #Lists.Special.Categories Category List lists

categories

This supports draggable/sortable (categories-sortable) and an edit button.

Example

End of Day

View Settlement Reports for All Markets
Volumes and OI

Daily and Historical Volume and Open Interest
Indices

View Indices Reports

<ul class="categories">
  <li>
    <div class="listing-title">End of Day</div>
    <div class="listing-description">View Settlement Reports for All Markets</div>
  </li>
  <li>
    <div class="listing-title">Volumes and OI</div>
    <div class="listing-description">Daily and Historical Volume and Open Interest</div>
  </li>
  <li class="is-active">
    <div class="listing-title">Indices</div>
    <div class="listing-description">View Indices Reports</div>
  </li>
</ul>

Example

End of Day

View Settlement Reports for All Markets
Volumes and OI

Daily and Historical Volume and Open Interest
Indices

View Indices Reports

Show Markup

<ul class="categories categories-sortable" style="max-width: 300px;">
  <li>
    <div class="listing-title">End of Day</div>
    <div class="listing-description">View Settlement Reports for All Markets</div>
    <button class="categories-edit">edit</button>
  </li>
  <li>
    <div class="listing-title">Volumes and OI</div>
    <div class="listing-description">Daily and Historical Volume and Open Interest</div>
    <button class="categories-edit">edit</button>
  </li>
  <li>
    <div class="listing-title">Indices</div>
    <div class="listing-description">View Indices Reports</div>
    <button class="categories-edit">edit</button>
  </li>
</ul>

8.8.4 #Lists.Special.Market Market List lists

market-list

Example

Lorem
Ipsum
Dolor
Sit amet

<ul class="market-list">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit amet</a></li>
</ul>

8.8.5 #Lists.Special.Product Product list

Example

Brent Crude
Wheat
Other stuff

<ul class="product-list">
  <li>Brent Crude</li>
  <li>Wheat</li>
  <li>Other stuff</li>
</ul>

8.8.6 #Lists.Special.Resources Resources

Example

<ul class="resources-list">
  <li><a href="#">Product Specs</a></li>
  <li><a href="#">Hours</a></li>
  <li><a href="#">Holidays</a></li>
  <li><a href="#">Expiry Calendar</a></li>
  <li><a href="#">Fees</a></li>
</ul>

8.8.7 #Lists.Special.Search-Results Search Results lists

search-results, search-results-title, search-results-url, search-results-related

Used on the search results page.

You can also change the icon to match various file types using item-* classes. Use search-results-action for a highlighted link to a file.

Example

Default icon (webpage)

Lorem ipsum dolor sit amet

http://www.example.com
2:22pm, 22 July 2018
Related link

Lorem ipsum dolor sit amet

http://www.example.com

<ul class="search-results">
  <li>
    <h3 class="search-results-title">
      <a href="#">Default icon (webpage)</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p class="search-results-url">
      <a href="#">http://www.example.com</a>
    </p>
  </li>
  <li class="search-results-related">
  <time class="search-results-date">2:22pm, 22 July 2018</time>
    <h3 class="search-results-title">
      <a href="#">Related link</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p class="search-results-url">
      <a href="#">http://www.example.com</a>
    </p>
  </li>
</ul>

Example

Pdf link

Lorem ipsum dolor sit amet

http://www.example.com
Word Document

Lorem ipsum dolor sit amet
Spreadsheet

Lorem ipsum dolor sit amet

Show Markup

<ul class="search-results">
  <li class="item-pdf">
    <h3 class="search-results-title">
      <a href="#">Pdf link</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p class="search-results-url">
      <a href="#">http://www.example.com</a>
    </p>
  </li>
  <li class="item-doc">
    <h3 class="search-results-title">
      <a href="#">Word Document</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
  </li>
  <li class="item-excel">
    <h3 class="search-results-title">
      <a href="#">Spreadsheet</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
  </li>
</ul>

8.8.8 #Lists.Special.Suggestions Suggestions

suggestions, suggestions-*

Used for a list of search results in the large dropdown.

Example

<ul class="suggestions is-highlighting">
  <li>
    <a href="#">
      <div class="suggestions-name">La<strong>rr</strong>y</div>
      <div class="suggestions-details">Hit on head by f<strong>r</strong>ying pan</div>
    </a>
  </li>
  <li class="is-active suggestions-recent">
    <a href="#">
      <div class="suggestions-name">Moe</div>
      <div class="suggestions-details">
        Foot <strong>r</strong>un over by wheel ba<strong>rr</strong>ow
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="suggestions-name">
        File:
        <span class="is-case-sensitive">Cu<strong>r</strong>lysDownfall.txt</span>
      </div>
      <div class="suggestions-details">
        <span class="is-case-sensitive">https://poked.in/theEye.txt</span>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="suggestions-preview text-right quote">
        <div class="quote-value">183.12</div>
        <div class="quote-change num num-positive num-colored">+0.75 (0.02%)</div>
      </div>
      <div class="suggestions-name">Inte<strong>r</strong>national Business Machines</div>
      <div class="suggestions-details">NYSE:IBM - Aug 14, 2014</div>
    </a>
  </li>
  <li>
    <a>
      <div class="suggestions-name">B<strong>rrrrr</strong>!</div>
      <div class="suggestions-details">Current Page</div>
    </a>
  </li>
</ul>

8.8.9 #Lists.Special.Threaded Threaded List lists

threaded-list, threaded-list-body, threaded-list-toggle

Badges are included in lists.css as well as extended.css. You do not need to include both style sheets in order to use badges in a threaded list.

Example

Resolved: NYSE issue disseminating trades and quotes in symbol range HO–JNZ
19:05 ET 25 Jan 2012

Services impacted

Market Data, trading

Market

NYSE

Category

General

The NYSE has published all final transactions for symbols in the alphabetic range HO through JNZ resolved as of 7:05:00 p.m. ET.
- NYSE issue disseminating trades and quotes in symbol range HO–JNZ
  15:36 ET 25 Jan 2012
  
  The NYSE is currently experiencing an issue publishing trade and quote information in the alphabetic symbol range HO through JNZ. Trade a quote information for symbols outside this range is up-to-date and being disseminated normally, and all other NYSE trading systems are functioning normally.
  
  Repairs are underway; an update will follow shortly.
- NYSE issue disseminating trades and quotes in symbol range HO–JNZ
  15:36 ET 25 Jan 2012
  
  The NYSE is currently experiencing an issue publishing trade and quote information in the alphabetic symbol range HO through JNZ. Trade a quote information for symbols outside this range is up-to-date and being disseminated normally, and all other NYSE trading systems are functioning normally.
  
  Repairs are underway; an update will follow shortly.

<ul class="threaded-list">
  <li>
    <header>
      <div class="badge badge-success"></div>
      <h4>Resolved: NYSE issue disseminating trades and quotes in symbol range HO&ndash;JNZ</h4>
      <time>19:05 ET 25 Jan 2012</time>
    </header>
    <div class="threaded-list-body">
      <dl class="metadatalist">
        <dt>Services impacted</dt>
        <dd>Market Data, trading</dd>
        <dt>Market</dt>
        <dd>NYSE</dd>
        <dt>Category</dt>
        <dd>General</dd>
      </dl>
      <p>The NYSE has published all final transactions for symbols in the alphabetic range HO through JNZ resolved as of 7:05:00 p.m. ET.</p>
    </div>
    <button class="threaded-list-toggle">Additional messaging</button>
    <ul class="threaded-list collapse">
      <li>
        <header>
          <div class="badge badge-warning"></div>
          <h4>NYSE issue disseminating trades and quotes in symbol range HO&ndash;JNZ</h4>
          <time>15:36 ET 25 Jan 2012</time>
        </header>
        <div class="threaded-list-body">
          <p>The NYSE is currently experiencing an issue publishing trade and quote information in the alphabetic symbol range HO through JNZ. Trade a quote information for symbols outside this range is up-to-date and being disseminated normally, and all other NYSE trading systems are functioning normally.</p>
          <p>Repairs are underway; an update will follow shortly.</p>
        </div>
      </li>
      <li>
        <header class="threaded-list-header-no-badge">
          <h4>NYSE issue disseminating trades and quotes in symbol range HO&ndash;JNZ</h4>
          <time>15:36 ET 25 Jan 2012</time>
        </header>
        <div class="threaded-list-body">
          <p>The NYSE is currently experiencing an issue publishing trade and quote information in the alphabetic symbol range HO through JNZ. Trade a quote information for symbols outside this range is up-to-date and being disseminated normally, and all other NYSE trading systems are functioning normally.</p>
          <p>Repairs are underway; an update will follow shortly.</p>
        </div>
      </li>
    </ul>
  </li>
</ul>

8.9 #Lists.Unstyled Unstyled

list-unstyled

Example

Item one
Item two
Item three
Item four

<ul class="list-unstyled">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
</ul>

IceGroupWeb CSS Guide

Styles

8 #Lists Lists

8.1 #Lists.Column-List Column lists

8.2 #Lists.Description-Lists Description Lists lists

8.2.1 #Lists.Description-Lists.Metadata Metadata lists

8.2.2 #Lists.Description-Lists.Split Split lists

8.3 #Lists.Document Document list

8.4 #Lists.Featured Featured

8.5 #Lists.Grid-List Grid List

8.6 #Lists.Inline Inline

8.6.1 #Lists.Inline.Separated Inline Separated

8.6.2 #Lists.Inline.Spaced Inline Spaced

8.6.3 #Lists.Inline.Span Inline Span

8.7 #Lists.Report Report List

8.8 #Lists.Special Special lists lists

8.8.1 #Lists.Special.Action Action List lists

8.8.2 #Lists.Special.Big-Numbers Big Numbers lists

8.8.3 #Lists.Special.Categories Category List lists

8.8.4 #Lists.Special.Market Market List lists

8.8.5 #Lists.Special.Product Product list

8.8.6 #Lists.Special.Resources Resources

8.8.7 #Lists.Special.Search-Results Search Results lists

Default icon (webpage)

Pdf link

Word Document

Spreadsheet

8.8.8 #Lists.Special.Suggestions Suggestions

8.8.9 #Lists.Special.Threaded Threaded List lists

Resolved: NYSE issue disseminating trades and quotes in symbol range HO–JNZ

NYSE issue disseminating trades and quotes in symbol range HO–JNZ

NYSE issue disseminating trades and quotes in symbol range HO–JNZ

8.9 #Lists.Unstyled Unstyled