Cards

Flexible and extensible content container.

How To

  1. Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Simple Example

Includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
HTML
<div class="card">
  <div class="card-body">A Basic Panel</div>
</div>
Logi XML
<Division Class="card" HtmlDiv="True">
  <Division Class="card-body" HtmlDiv="True">
    <Label Caption="A Basic Panel" />
  </Division>
</Division>
Standard Examples
Default Card

The following is an example of the .card class.

<Division Class="card" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
</Division>
<Division Class="card" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> <Label Caption="..." /> </Division> </Division>
Basic
This is some text within a card block.
<Division Class="card" HtmlDiv="True">
  <Division Class="card-body" HtmlDiv="True">
    <Label Caption="..." Class="form-text" Format="HTML" HtmlTag="P" />
  </Division>
</Division>
<Division Class="card" HtmlDiv="True"> <Division Class="card-body" HtmlDiv="True"> <Label Caption="..." Class="form-text" Format="HTML" HtmlTag="P" /> </Division> </Division>
Card styles
Primary Card

The following is an example of the .card .card-primary class.

<Division Class="card card-primary" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-primary" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Success Card

The following is an example of the .card .card-success class.

<Division Class="card card-success" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-success" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Info Card

The following is an example of the .card .card-info class.

<Division Class="card card-info" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-info" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Warning Card

The following is an example of the .card .card-warning class.

<Division Class="card card-warning" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-warning" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Danger Card

The following is an example of the .card .card-danger class.

<Division Class="card card-danger" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-danger" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Secondary Card

The following is an example of the .card .card-secondary class.

<Division Class="card card-secondary" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-secondary" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Faded Card

The following is an example of the .card .card-faded class.

<Division Class="card card-faded" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-faded" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Dark Card

The following is an example of the .card .card-dark class.

<Division Class="card card-dark" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card card-dark" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Borders
Border Primary

The following is an example of the .card .border .border-primary class.

<Division Class="card border border-primary" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-primary" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Success

The following is an example of the .card .border .border-success class.

<Division Class="card border border-success" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-success" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Info

The following is an example of the .card .border .border-info class.

<Division Class="card border border-info" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-info" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Warning

The following is an example of the .card .border .border-warning class.

<Division Class="card border border-warning" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-warning" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Danger

The following is an example of the .card .border .border-danger class.

<Division Class="card border border-danger" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-danger" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Secondary

The following is an example of the .card .border .border-secondary class.

<Division Class="card border border-secondary" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-secondary" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Light

The following is an example of the .card .border .border-light class.

<Division Class="card border border-danger" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-danger" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Border Dark

The following is an example of the .card .border .border-dark class.

<Division Class="card border border-success" HtmlDiv="True">
  <Division Class="card-header" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="card-body" HtmlDiv="True">
  </Division>
</Division>
<Division Class="card border border-success" HtmlDiv="True"> <Division Class="card-header" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="card-body" HtmlDiv="True"> </Division> </Division>
Mixed utilities
Mixed utilities

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Footer
<Division Class="card border border-success" HtmlDiv="True">
  <Division Class="card-header bg-transparent border-success" HtmlDiv="True">
    <Label Caption="Header" />
  </Division>
  <Division Class="card-body text-success" HtmlDiv="True">
    <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
    <Label Caption="..." Class="card-text" HtmlTag="P" />
  </Division>
  <Division Class="card-footer bg-transparent border-success" HtmlDiv="True">
    <Label Caption="Footer" />
  </Division>
</Division>
<Division Class="card border border-success" HtmlDiv="True"> <Division Class="card-header bg-transparent border-success" HtmlDiv="True"> <Label Caption="Header" /> </Division> <Division Class="card-body text-success" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> <Division Class="card-footer bg-transparent border-success" HtmlDiv="True"> <Label Caption="Footer" /> </Division> </Division>
Images

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<Division Class="card" HtmlDiv="True">
  <Image Caption="Framework.images.LogiAnalytics.png" Class="card-img-top" />
  <Division Class="card-body" HtmlDiv="True">
    <Label Caption="Card Title" Class="card-title" HtmlTag="H4" />
    <Label Caption="..." Class="card-text" HtmlTag="P" />
  </Division>
</Division>
<Division Class="card" HtmlDiv="True"> <Image Caption="Framework.images.LogiAnalytics.png" Class="card-img-top bg-success" /> <Division Class="card-body" HtmlDiv="True"> <Label Caption="Card Title" Class="card-title" HtmlTag="H4" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division>

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<Division Class="card" HtmlDiv="True">
  <Division Class="card-body" HtmlDiv="True">
    <Label Caption="Card Title" Class="card-title" HtmlTag="H4" />
    <Label Caption="..." Class="card-text" HtmlTag="P" />
  </Division>
  <Image Caption="Framework.images.LogiAnalytics.png" Class="card-img-bottom" />
</Division>
<Division Class="card" HtmlDiv="True"> <Division Class="card-body" HtmlDiv="True"> <Label Caption="Card Title" Class="card-title" HtmlTag="H4" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> <Image Caption="Framework.images.LogiAnalytics.png" Class="card-img-bottom" /> </Division>
Grouped Panels
Example

Group many cards together.

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<Division Class="card-group" HtmlDiv="True">
  <Division Class="card" HtmlDiv="True">
    <Image Class="card-img-top bg-secondary" Caption="Framework.images.LogiAnalytics.png" />
    <Division Class="card-body" HtmlDiv="True">
      <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
      <Label Caption="..." Class="card-text" HtmlTag="P" />
    </Division>
  </Division>
  <Division Class="card" HtmlDiv="True">
    <Image Class="card-img-top bg-info" Caption="Framework.images.LogiAnalytics.png" />
    <Division Class="card-body" HtmlDiv="True">
      <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
      <Label Caption="..." Class="card-text" HtmlTag="P" />
    </Division>
  </Division>
  <Division Class="card" HtmlDiv="True">
    <Image Class="card-img-top bg-primary" Caption="Framework.images.LogiAnalytics.png" />
    <Division Class="card-body" HtmlDiv="True">
      <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
      <Label Caption="..." Class="card-text" HtmlTag="P" />
    </Division>
  </Division>
</Division>
<Division Class="card-group" HtmlDiv="True"> <Division Class="card" HtmlDiv="True"> <Image Class="card-img-top bg-secondary" Caption="Framework.images.LogiAnalytics.png" /> <Division Class="card-body" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division> <Division Class="card" HtmlDiv="True"> <Image Class="card-img-top bg-info" Caption="Framework.images.LogiAnalytics.png" /> <Division Class="card-body" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division> <Division Class="card" HtmlDiv="True"> <Image Class="card-img-top bg-primary" Caption="Framework.images.LogiAnalytics.png" /> <Division Class="card-body" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division> </Division>
Card Decks
Example

Group many cards together.

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<Division Class="card-deck" HtmlDiv="True">
  <Division Class="card" HtmlDiv="True">
    <Image Class="card-img-top bg-secondary" Caption="Framework.images.LogiAnalytics.png" />
    <Division Class="card-body" HtmlDiv="True">
      <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
      <Label Caption="..." Class="card-text" HtmlTag="P" />
    </Division>
  </Division>
  <Division Class="card" HtmlDiv="True">
    <Image Class="card-img-top bg-info" Caption="Framework.images.LogiAnalytics.png" />
    <Division Class="card-body" HtmlDiv="True">
      <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
      <Label Caption="..." Class="card-text" HtmlTag="P" />
    </Division>
  </Division>
  <Division Class="card" HtmlDiv="True">
    <Image Class="card-img-top bg-primary" Caption="Framework.images.LogiAnalytics.png" />
    <Division Class="card-body" HtmlDiv="True">
      <Label HtmlTag="H4" Class="card-title" Caption="Card Title" />
      <Label Caption="..." Class="card-text" HtmlTag="P" />
    </Division>
  </Division>
</Division>
<Division Class="card-deck" HtmlDiv="True"> <Division Class="card" HtmlDiv="True"> <Image Class="card-img-top bg-secondary" Caption="Framework.images.LogiAnalytics.png" /> <Division Class="card-body" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division> <Division Class="card" HtmlDiv="True"> <Image Class="card-img-top bg-info" Caption="Framework.images.LogiAnalytics.png" /> <Division Class="card-body" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division> <Division Class="card" HtmlDiv="True"> <Image Class="card-img-top bg-primary" Caption="Framework.images.LogiAnalytics.png" /> <Division Class="card-body" HtmlDiv="True"> <Label HtmlTag="H4" Class="card-title" Caption="Card Title" /> <Label Caption="..." Class="card-text" HtmlTag="P" /> </Division> </Division> </Division>
Jumbotron
Example
Showcase key content by adding a jumbotron accross the entire viewport.

Hello Logi!

...
<Division Class="jumbotron" HtmlDiv="True" ID="divJumbotron">
  <Label Caption="Hello Logi!" HtmlTag="H1" />
  <Label Caption="..." HtmlTag="P" />
</Division>
<Division Class="jumbotron" HtmlDiv="True" ID="divJumbotron"> <Label Caption="Hello Logi!" HtmlTag="H1" /> <Label Caption="..." HtmlTag="P" /> </Division>