Cards

Cards

A card is a flexible and extensible content container. It includes options for headers, footers, a wide variety of content, contextual background colors, and powerful display modifiers.

Basic card

A basic card comprises 4 elements: a .card wrapper containing .card-header, .card-block and .card-footer.

Card title

Add .separator to the .card-header to display a border between .card-header and .card-block.

Card title

Card optional subtitle

When adding a subtitle don't forget to wrap both .card-title and .card-subtitle in a span.


Add .separator to the .card-footer to display a border between .card-block and .card-footer.

Card with an image on top

Just place an img as a direct child of .card.

<div class="row">

  <div class="col-sm-4">
    <div class="card">
      <div class="card-header separator">
        <h4 class="card-title">Card Title h4</h4>
      </div>
      <div class="card-block">
        <p>Text content.</p>
      </div>
      <div class="card-footer">
        <button class="btn btn-primary">Button in footer</button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card">
      <div class="card-header">
        <span>
          <h3 class="card-title">Card Title h3</h3>
          <p class="card-subtitle">Card optional subtitle</p>
        </span>
      </div>
      <div class="card-block">
        <p>Text content.</p>
      </div>
      <div class="card-footer separator">
        <button class="btn btn-primary">Button in footer</button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card">
      <img src="https://unsplash.it/410/200/?random=2" alt="" class="img-responsive">
      <div class="card-header">
        <h4 class="card-title">Card with an image on top</h4>
      </div>
      <div class="card-block">
        <p>Text content.</p>
      </div>
    </div>
  </div>

</div>
  

Modifier classes

Use the modifier classes .success, .warning, .danger, .highlight, and .info to change the appearance of a card.

Warning Card

Do you see any Teletubbies?

Do you see a slender plastic tag clipped to my shirt with my name printed on it?

Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No?

Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

Info Card

A crappy spray gun from South Miami

This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.

Card highlight

Adds a thick border around the card.

Watch out

Check your self, you aren't looking too good.

Well done!

That's how we do things around here.

<div class="card warning">
  <div class="card-header">
    <h3 class="card-title">Card warning</h3>
    <p class="card-subtitle">Card subtitle</p>
  </div>
  <div class="card-block">
    <p>card content</p>
  </div>
  <div class="card-footer separator">
    <button class="btn btn-default">Card Button</button>
  </div>
</div>

<div class="card info">
  <div class="card-header">
    <h3 class="card-title">Card info</h3>
    <p class="card-subtitle">Card subtitle</p>
  </div>
  <div class="card-block">
    <p>card content</p>
  </div>
  <div class="card-footer separator">
    <button class="btn btn-default">Card Button</button>
  </div>
</div>

<div class="card danger">
  <div class="card-header">
    <h3 class="card-title">Card danger</h3>
    <p class="card-subtitle">Card subtitle</p>
  </div>
  <div class="card-block">
    <p>card content</p>
  </div>
  <div class="card-footer separator">
    <button class="btn btn-default">Card Button</button>
  </div>
</div>

<div class="card success">
  <div class="card-header">
    <h3 class="card-title">Card success</h3>
    <p class="card-subtitle">Card subtitle</p>
  </div>
  <div class="card-block">
    <p>card content</p>
  </div>
  <div class="card-footer separator">
    <button class="btn btn-default">Card Button</button>
  </div>
</div>

<div class="card card-highlight">
  <div class="card-header">
    <h3 class="card-title">Card highlight</h3>
    <p class="card-subtitle">Card subtitle</p>
  </div>
  <div class="card-block">
    <p>card content</p>
  </div>
  <div class="card-footer separator">
    <button class="btn btn-default">Card Button</button>
  </div>
</div>
  

Form card

Forms or form elements should be placed in a .card-block.

To provide the submit button in the card footer, you'll have to add the form as a direct child of .card and add both .card-block and .card-footer inside.

WAN

<!-- containing form elements -->
<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Device profile</h4>
  </div>
  <div class="card-block">
    <div class="form-group">
      <label>Some label</label>
      <input class="form-control" type="text">
    </div>
      […]
  </div>
</div>

<!-- containing a form -->
<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Device profile</h4>
  </div>
  <form>
    <div class="card-block">
      <div class="form-group">
        <label>Some label</label>
        <input class="form-control" type="text">
      </div>
      […]
    </div>
    <div class="card-footer separator">
      <input type="submit" value="submit">  
    </div>
  </form>
</div>

List group card

List groups are placed as a direct child of .card to ensure proper padding.

Data Points
c8y_AccelerationMeasurement => acceleration

accelerationSensor

c8y_HumidityMeasurement => h

humiditySensor

<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <ul class="list-group" >
    […]
  </ul>
</div>

<!-- optionally you can add .card-inner-scroll to the .list-group to allow overflow: auto -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <ul class="list-group card-inner-scroll">
    […]
  </ul>
</div>

Table card

Tables are placed as a direct child of .card to ensure proper padding.

Device list

Status Name Model Serial number Group Registration date System ID IMEI Alarms
Cloudgate
M2M-111111-01
BeateTest, Cc
35196000
RaspPi BCM2709
0000000071d36506
Beate_sub, Cc, ChristianTest
18 February 2016 12:46
635236265
NTC-6200-02
165711153701256
Bayer 1 dep, BeateTest, Cc
12 May 2016 14:28
651642958
359054050128762
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <table class="table">
    […]
  </table>
</div>

<!-- optionally you can wrap the table in a .card-inner-scroll to allow overflow: auto -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <div class="card-inner-scroll">
    <table class="table">
      […]
    </table>
  </div>
</div>

Mixed content card

Card supports multiple type of content, you can use the contextual background modifier classes to highlight sections.

LAN


Device status

Send connection: online

Push connection: active

6 March 2018 12:11

15 minutes

device_0060642dd3f0
<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Card title</h4> 
  </div>
  <div class="bg-gray-lighter">
    <div class="card-block">
      <!-- some content -->
    </div>
  </div>
  <div class="card-block">
    <!-- some other content -->
  </div>
  <div class="card-footer separator">
      <button class="btn btn-primary">Some action</button>
  </div>
</div>

<div class="card card-dashboard">
  <div class="card-header actions">
    <div class="card-title">Card title</div> 
  </div>
  <div class="card-inner-scroll bg-gray-lighter">
    <div class="card-block bg-white">
      <!-- some content over white -->
    </div>
    <div class="card-block">
      <!-- some other content over gray-lighter -->
    </div>
  </div>
</div>

Card scrollable content

Cards may contain scrollable content. Simply add a .card-inner-scroll as a direct child of .card. It might require setting up the max-height CSS property.

When adding a list-group you can add the .card-inner-scroll to the .list-group, but when adding a table, you'll have to wrap it in a .card-inner-scroll.

Available applications


  • AP

    APAMA

    MARKET

    HOSTED

    demos

  • Administration

    MARKET

    HOSTED

    management

  • Ar

    Archive

    MARKET

    HOSTED

    demos

  • bi

    Billwerk

    MARKET

    MICROSERVICE

    management

  • C8ydata

    MARKET

    HOSTED

    management

  • cl

    Cloud-remote-access

    MARKET

    MICROSERVICE

    management

  • Cockpit

    MARKET

    HOSTED

    management

  • Cockpitbeta

    MARKET

    HOSTED

    management

  • co

    Core

    MARKET

    HOSTED

    management

  • De

    Demoboard

    MARKET

    HOSTED

    management

  • Device management

    MARKET

    HOSTED

    management

  • de

    Device-simulator

    MARKET

    MICROSERVICE

    management

  • ec

    Econnectbike-7.43.0

    MARKET

    HOSTED

    demos

  • Ex

    Example: Simple Alarm App

    MARKET

    HOSTED

    demos

  • Ex

    Example: Weather maps

    MARKET

    HOSTED

    demos

  • fe

    Feature-broker

    MARKET

    HOSTED

    management

  • Feature-fieldbus4

    MARKET

    HOSTED

    management

  • fe

    Feature-user-hierarchy

    MARKET

    HOSTED

    management

  • sm

    Smartrule

    MARKET

    MICROSERVICE

    management

  • st

    Styleguide

    MARKET

    HOSTED

    demos

  • Tr

    Tracking

    MARKET

    HOSTED

    management

  • wi

    Windmills

    MARKET

    HOSTED

    management

  • cl

    Cloudnurse

    PRIVATE

    HOSTED

    demos

  • Cockpit1

    PRIVATE

    HOSTED

    demos

  • Cockpittest

    PRIVATE

    HOSTED

    demos

  • DevicemanagementSBD

    PRIVATE

    HOSTED

    demos

  • ec

    Echo

    PRIVATE

    HOSTED

    demos

  • Ex

    Example: Branding

    PRIVATE

    HOSTED

    demos

  • i1

    I18n

    PRIVATE

    HOSTED

    demos

  • my

    MyClonde

    PRIVATE

    HOSTED

    demos

  • st

    Steamgendemo

    PRIVATE

    HOSTED

    demos

  • Tr

    Tracking

    PRIVATE

    HOSTED

    demos

  • Tr

    Tracking for consumer

    PRIVATE

    HOSTED

    demos

  • uk

    Uk-weather-stations-master

    PRIVATE

    HOSTED

    demos

  • ve

    Vendme plugins

    PRIVATE

    HOSTED

    demos

Status Name Model Serial number Group Registration date System ID IMEI Alarms
Cloudgate
M2M-111111-01
BeateTest, Cc
35196000
RaspPi BCM2709
0000000071d36506
Beate_sub, Cc, ChristianTest
18 February 2016 12:46
635236265
NTC-6200-02
165711153701256
Bayer 1 dep, BeateTest, Cc
12 May 2016 14:28
651642958
359054050128762
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <div class="card-inner-scroll" style="max-height: 200px">
    <div class="card-block">
      <p>Content</p>
    </div>
  </div>
</div>

<!-- card with a list group -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <ul class="list-group card-inner-scroll" style="max-height: 200px">
   […]
  </ul>
</div>

<!-- card with a table -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4> 
  </div>
  <div class="card-inner-scroll" style="max-height: 200px">
    <table class="table">
      […]
    </table>
  </div>
</div>

Card dashboard

When using cards in a dashboard, add .card-dashboard to the .card.

Use .card-header-actions to adjust the title and display a dropdown in the header.

Content should be placed inside a .card-inner-scroll.

35%65% New data pointWorkload
Data points list
Label Target Current Diff Diff % Asset
Demoboard Temperature (Elvaco) °C 23.76 Demoboard Energy Monitor
Temperature C Demoboard Energy Monitor
Humidity (Elvaco) Hum 30 19.370001 -10.63 -35.43 Demoboard Energy Monitor
<div class="card card-dashboard">
  <div class="card-header-actions">
    <div class="card-title">Card title</div>
    <div class="header-actions">
      <div class="optionsBtn dropdown"  uib-dropdown>
        <a href="" class="btnIcon dropdown-toggle c8y-dropdown" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
          <i c8y-icon="cog" class="fa fw fa-cog"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
          […]
        </ul>
      </div>
    </div>
  </div>
  <div class="card-inner-scroll">
    <!-- card content -->
  </div>
</div>

Card group

Using the flexbox model, balances the height on every card sharing the same container.

Adding .interact-grid to the .card-group will add a slight animation to every .card that is an anchor or contains ng-click.

Two use cases:

1 — Wrapping the .card in the grid classes .col-**-** inside a .card-group will keep the gutter;

AP

APAMA

helloworldapp

Ar

Archive

archive

cl

Cloudnurse

cloudnurse

Cockpit1

cockpit1

Open

Cockpittest

cockpit-test

Open
<div class="card-group interact-grid">
  <div class="col-xs-12 col-md-4">
    <div class="card">
      […]
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div class="card">
      […]
    </div>
    […]
  </div>
</div>

 

2 — Placing the grid classes .col-**-** and adding .card inside a .card-group-block removes the gutter creating a single block of cards.

<div class="card-group interact-grid">
  <div class="col-xs-12 col-md-4 card">
    […]
  </div>
  <div class="col-xs-12 col-md-4 card">
    […]
  </div>
  […]
</div>

Grid list card

To toggle displaying a record list as grid or as list, just use the classes .interact-list or .interact-grid on the wrapping .card-group.

It's used in record lists such as data point library, simulators, smartREST templates, sub assets, data broker and many more.

Use a c8y-list-display-control to display a select for class switching.

Add a contextual dropdown in any card by wrapping a dropdown in a .card-actions.

The .card-actions element should always preced the .card-header element to make it properly spaced.

Sub group
12
BeagleBone Black
Linux MAC
C8A030B89C80
2
<!-- Change from interact-list to interact-grid to display a grid of cards -->
<c8y-list-display-control list-length="vm.items.length"
  on-list-class-change="vm.listClass = listClass">
</c8y-list-display-control>

<div class="card-group interact-list" ng-class="vm.listClass || 'interact-list'">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" ng-repeat="i in items | orderBy:'name'">
    <div class="card">
      <!-- card actions - containing a dropdown -->
      <div class="card-actions"
        ng-click="$event.stopPropagation()">
        <div class="settings dropdown" uib-dropdown="" is-open="menuOpen">
          <button type="button" title="Options" class="dropdown-toggle c8y-dropdown" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle="">
            <i c8y-icon="ellipsis-v" class="fa fw fa-ellipsis-v"></i>
          </button>
          <ul class="dropdown-menu" uib-dropdown-menu>
            […]
          </ul>
        </div>
      </div>
  
      <!-- card header containing the title, make sure you always add text-truncate -->
      <div class="card-header separator text-truncate">
        <div class="card-icon">
          <i c8y-icon="c8y-group-open" class="c8y-icon c8y-icon-group-open"></i>
        </div>
        <!-- always add the title attribute -->
        <div class="card-title" title="BeagleBone Black">
          BeagleBone Black
        </div>
      </div>
  
      <!-- card content -->
      <!-- you may use the grid classes to structure the content horizontally -->
      <div class="card-block">
        <div class="col-xs-12 col-sm-4 text-truncate">
          <label class="small ng-binding">Model</label> Linux MAC
        </div>
        <div class="col-xs-12 col-sm-4 text-truncate">
          <label class="small ng-binding">S/N</label> C8A030B89C80
        </div>
      </div>
  
    </div>
  </div>
</div>

Flip card

Use two cards to display one at a time on each side of a flip card.

Place a .card-flip-container inside any .col-**-** and wrap a .card.card-front and a .card.card-back in a .card-flip to hold the information in the front and in the back.

Some firmware

Version

1.1

<div class="card-group interact-grid">
  <div class="col-xs-12 col-sm-6 col-md-4">

    <div class="card-flip-container" ng-class="{'flipping': isFlipped}">
      <div class="card-flip" ng-class="{'flipped': isFlipped}" >

        <div class="card card-front">
          <div class="card-actions collapsible">
          […]
          </div>
          <div class="card-header">
          […]
          </div>
          <div class="card-block">
            […]
          </div>
          <!-- flip button-->
          <div class="card-actions-group">
            <button class="btn-flip" ng-click="isFlipped = !isFlipped"><i c8y-icon="reply" class="fa fw fa-reply"></i> Details</button>
          </div>
        </div><!-- /.card-front -->

        <div class="card card-back">
          <div class="card-header-actions">
            […]
          </div>
          <div class="card-inner-scroll">
            […]
          </div>
          <!-- flip button-->
          <div class="card-actions-group">
            <button type="button" class="btn-flip" ng-click="isFlipped = !isFlipped"><i c8y-icon="reply" class="fa fw fa-reply"></i> Back</button>
          </div>
        </div> <!-- /.card-back -->

      </div><!-- /.card-flip -->
    </div> <!-- /.card-flip-container -->

  </div>
</div>