Livestax

Examples

Build on the basic components to create rich, consistent user experiences.

filter lists

A filter list can be useful for providing filtering on a list group item.

All required JavaScript for the filter list examples is included within the example source code.

basic inline

The inline filter is useful for real time filtering results of a list.

Simple

Example


  • Arthur
  • David
  • Brian
  • Simon
  • Luther
  • Nathan
  • Gareth

Header

Example


  • Finance
  • Arthur
  • David
  • Brian
  • Human Resources
  • Simon
  • Luther
  • Nathan

Sorted

Example


  • Arthur
  • David
  • Nigel
  • Andrew
  • Nathan
  • Arthur
  • David
  • Nigel
  • Andrew
  • Nathan

rich types

Filters can be applied to any list type and filter down on specific items of text within the list group items.

Content

Example


  • Arthur

    Accountant

  • David

    Admin Clerk

  • Brian

    Finance Director

  • Simon

    HR Executive

  • Luther

    HR Specialist

Media

Example


  • sample photo of sewing buttons

    Arthur

    Accountant
  • sample photo of sewing buttons

    David

    Admin Clerk
  • sample photo of sewing buttons

    Brian

    Finance Director

collapsible lists

A Collapsible list can be useful for providing additional information about an item whilst remaining in context.

value list

A value list allows for lists of data with values that roll up into a summary row.

Collapsed

Example
    • Anchor Security Ltd
      £471
    • Anglia Ruskin University
      £2,541
    • ASDA Stores Ltd
      £595
    • Barnes Construction PLC
      £10,438
    • Cruden Construction Ltd
      £7,066

  • Under Notice This Month

    £16,829

  • Example of long truncated text that will be ellipsized

    £16,829

Expanded

Example

  • All Contracts Under Notice

    £70,919

    • Anchor Security Ltd
      £471
    • Anglia Ruskin University
      £2,541
    • ASDA Stores Ltd
      £595
    • Barnes Construction PLC
      £10,438
    • Cruden Construction Ltd
      £7,066

  • Under Notice This Month

    £16,829

  • Example of long truncated text that will be ellipsized

    £16,829

nested info list

Example
    • Current Value

      £5,318

      - 28.8%

      Start of Year Value

      £7,479

      Product value has decreased £2,151 since the start of the year.
    • Current Value

      £10,587

      + 27.8%

      Start of Year Value

      £7,644

      Product value has increased £2,943 since the start of the year.
    • Current Value

      £8,567

      - 1.42%

      Start of Year Value

      £8,687

      Product value has decreased £120 since the start of the year.

media list

The media list collapsible list allows for information with various media (images and text) whilst also providing further drill down information.

Collapsed

Example
        • 30/5 Client is unhappy and wants to negotiate a discount
        • No notes available
        • No notes available
        • No notes available

Uncollapsed

Example
  • sample photo of sewing buttons

    Josephine Rolando Smith Jackson Mendes Campbell

    Credit Controller

    £170,898

    • Pink Construction Ltd

      £120,898

      • JI4684 - 10th June 2015
        £50,810
        • 29/4 SR555555/555555, want sorting before payment, update ruined values in Accounts, can't pay.
          26/3 Oleta has sent to customer - no reply yet, will chase.
      • PS5416 - 4th June 2015
        £70,087
        • 30/5 Client is unhappy and wants to negotiate a discount
        • No notes available
        • No notes available
        • No notes available

grid list

Example
  • Item
    Actual (£)
    Target (£)
    val (%)
  • Revenue
    1342
    0
    88
    • ILF
      120
      3
      54
    • CLF
      1222
      0
      100
      • Annual License & Support
        804
        4
        90
      • Annual Fee
        804
        4
        90
Example
  • Item
    Actual (£)
    Target (£)
    Value (%)
  • Revenue
    1342
    0
    88
    • ILF
      120
      3
      54
    • CLF
      1222
      0
      100
      • Annual License & Support
        804
        4
        90
      • Annual Fee
        804
        4
        90