Typography & CSS Text Helpers

Provide meaning to content.

How To

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

Headings

Example

Example heading .h1

Example heading .h2

Example heading .h3

Example heading .h4

Example heading .h5

Example heading .h6

<Division Class="h1" HtmlDiv="True">
  <Label Caption="Example heading " />
  <Label Caption="H1" Class="label label-default" />
</Division>
<Division Class="h2" HtmlDiv="True">
  <Label Caption="Example heading " />
  <Label Caption="H2" Class="label label-default" />
</Division>
<Division Class="h3" HtmlDiv="True">
  <Label Caption="Example heading " />
  <Label Caption="H3" Class="label label-default" />
</Division>
<Division Class="h4" HtmlDiv="True">
  <Label Caption="Example heading " />
  <Label Caption="H4" Class="label label-default" />
</Division>
<Division Class="h5" HtmlDiv="True">
  <Label Caption="Example heading " />
  <Label Caption="H5" Class="label label-default" />
</Division>
<Division Class="h6" HtmlDiv="True">
  <Label Caption="Example heading " />
  <Label Caption="H6" Class="label label-default" />
</Division>

Page Header

Simply a shell of a h1 to assign the suitable amount of space. Click here to check out more page header and options.

Example

Display 1

Display 2

Display 3

Display 4

<Label Caption="..." HtmlTag="H1" Class="display-1" />
<Label Caption="..." HtmlTag="H1" Class="display-2" />
<Label Caption="..." HtmlTag="H1" Class="display-3" />
<Label Caption="..." HtmlTag="H1" Class="display-4" />

Lead

Make a paragraph stand out by adding .lead.

Example

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<Label Caption="..." Class="lead" HtmlTag="P" />

Text Color

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Contextual colors

Use the.text-muted for disabled or unnecessary content.

Use the.text-primary for extra visual weight and identifies the primary content.

Use the.text-success to indicate successful or positive content.

Use the.text-info for content related to information.

Use the.text-warning to show caution should be taken with this action

Use the.text-danger to indicate a dangerous or harmful action.

<Label Caption="..." Class="text-muted" Format="HTML" HtmlTag="P" />
<Label Caption="..." Class="text-primary" Format="HTML" HtmlTag="P" />
<Label Caption="..." Class="text-success" Format="HTML" HtmlTag="P" />
<Label Caption="..." Class="text-info" Format="HTML" HtmlTag="P" />
<Label Caption="..." Class="text-warning" Format="HTML" HtmlTag="P" />
<Label Caption="..." Class="text-danger" Format="HTML" HtmlTag="P" />

Background Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Contextual backgrounds

Use the.bg-primary for extra visual weight and identifies the primary content.

Use the.bg-success to indicate successful or positive.

Use the.bg-info for informational content.

Use the.bg-warning to show caution.

Use the.bg-danger to indicate a dangerous or harmful action.

<Label Caption="..." Class="bg-primary" HtmlTag="P" />
<Label Caption="..." Class="bg-success" HtmlTag="P" />
<Label Caption="..." Class="bg-info" HtmlTag="P" />
<Label Caption="..." Class="bg-warning" HtmlTag="P" />
<Label Caption="..." Class="bg-danger" HtmlTag="P" />

Typography

Example

Use the <ins> for adding new content.

Use the  to Underlined Text.

Use the <abbr> for abbreviated text and add the unabbreviated text to the title/tool tip. Example: 'HTML'

Use the <del> to specify content that is no longer applicable. Example: ~~There are 9 planets in our solar system.~~

Use the <s> is used to specify content that is no longer applicable. Example: ~~I use to work in our UK office.~~

Use the  to make text smaller.

Use the  or .ThemeBold for bold text.

Use the  for italic text.

Use the  to Highlighting Text.

Use the .text-justify for justified text. Justified text references the spacing between text.

Use the .text-nowrap for keep text from wrapping.

Use the <kbd> to indicate input that is typically entered via keyboard: Example: ctrl + p

Sample Block is used to show output from a computer.

Use .text-justify for justified text. Justified text references the spacing between text.

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block. Requires display: inline-block or display: block.

Use .text-lowercase for lowercase text.

Use .text-uppercase for uppercase text.

use .text-capitalize to only changes the first letter of each word.

<Label Caption="..." HtmlTag="ins" />
<Label Caption="..." HtmlTag="u" />
<Label Caption="..." HtmlTag="abbr" Class="initialism" Tooltip="..." />
<Label Caption="..." HtmlTag="del" />
<Label Caption="..." HtmlTag="s" />
<Label Caption="..." HtmlTag="small" />
<Label Caption="..." HtmlTag="strong" />
<Label Caption="..." HtmlTag="em" />
<Label Caption="..." HtmlTag="mark" />
<Label Caption="..." HtmlTag="kbd" />
<Label Caption="..." HtmlTag="samp" />
<Label Caption="..." Class="text-justify" HtmlTag="P" />
<Label Caption="..." Class="text-nowrap" HtmlTag="P" />
<Label Caption="..." Class="text-truncate" HtmlTag="P" />
<Label Caption="..." Class="text-lowercase" HtmlTag="P" />
<Label Caption="..." Class="text-uppercase" HtmlTag="P" />
<Label Caption="..." Class="text-capitalize" HtmlTag="P" />

Alignment

Use the.text-left to left justify text.

Use the.text-right to right justify text.

Use the.text-center center text.

Use the.float-left to float content left.

Use the.float-right to float content right.

Use .text-xs-left for left aligned text on viewports sized XL (extra-large) or wider.

Use .text-sm-right for right aligned text on viewports sized SM (small) or wider.

Use .text-md-center for center aligned text on viewports sized MD (medium) or wider.

Use .text-lg-right for right aligned text on viewports sized LG (large) or wider.

<Label Caption="..." Class="text-left" HtmlTag="P" />
<Label Caption="..." Class="text-right" HtmlTag="P" />
<Label Caption="..." Class="text-center" HtmlTag="P" />

<Division Class="float-left">
  <Label Caption="..." />
</Division>
<Division Class="float-right">
  <Label Caption="..." />
</Division>

<Label Caption="..." Class="text-xs-left" HtmlTag="P" />
<Label Caption="..." Class="text-sm-right" HtmlTag="P" />
<Label Caption="..." Class="text-md-center" HtmlTag="P" />
<Label Caption="..." Class="text-lg-right" HtmlTag="P" />

Block Quotes

Left Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<Division Class="blockquote" HtmlDiv="True">
  <Label Caption="..." HtmlTag="P" Class="mb-0" />
  <Label Caption="..." Format="html" HtmlTag="footer" Class="blockquote-footer" />
</Division>

Right Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<Division Class="blockquote text-right" HtmlDiv="True">
  <Label Caption="..." HtmlTag="P" Class="mb-0" />
  <Label Caption="..." Format="html" HtmlTag="footer" Class="blockquote-footer" />
</Division>

Help Block

A block of help text that breaks onto a new line and may extend beyond one line

Example

This is an example of help text.

<Label Caption="" Class="form-text text-muted" HtmlTag="P" />

Address

Example

Logi Analytics.
7900 Westpark Drive, Suite A200
McLean, VA 22102
P: (888) 564-4965

<Division Class="address" HtmlDiv="True">
  <Label Caption="Logi Analytics." HtmlTag="strong" />
  <LineBreak />
  <Label Caption="7900 Westpark Drive, Suite A200" />
  <LineBreak />
  <Label Caption="McLean, VA 22102" />
  <LineBreak />
  <Label Caption="P:" HtmlTag="abbr" Tooltip="Phone" />
  <Spaces />
  <Label Caption="(888) 564-4965" />
</Division>

Email Address

Sales Team
[email protected]

<Division Class="address" HtmlDiv="True">
  <Label Caption="Sales Team" HtmlTag="strong" />
  <LineBreak />
  <Label Caption="[email protected]">
    <Action Type="Link">
      <Target Type="Link" Link="mailto:[email protected]" />
    </Action>
  </Label>
</Division>