Comments


Tech Sheet

In its simplest terms a comment is one or more sentences preceded with an icon. Size and color can be any desired mixed of the following.

Size

  • extra small
  • small
  • regular
  • large
  • extra large

Colors

  • amber
  • black & white
  • blue
  • blue grey
  • brown
  • cyan
  • deep orange
  • deep purple
  • green
  • grey
  • indigo
  • light blue
  • light green
  • lime
  • orange
  • pink
  • purple
  • red
  • teal
  • tint
  • yellow

Example Sizes

Small

1x Blank Line

Regular

1x Blank Line

Large

1x Blank Line

Large icon / Regular text

1x Blank Line

Typical Use Cases

Attribute comment
Text above comment
This is an attribution text
Text below comment

1x Blank Line

Bulleted comment
Text above comment
This is a bulleted comment
Text below comment

1x Blank Line

Bug comment
Text above comment
This is a bug comment
Text below comment

1x Blank Line

Favorite comment
Text above comment
This is a favorite comment
Text below comment

1x Blank Line

Class comment
Text above comment
This is a class comment
Text below comment

1x Blank Line

News comment
Text above comment
This is a news comment
Text below comment

1x Blank Line

Info comment
Text above comment
This is a inline comment
Text below comment

1x Blank Line

Print comment
Text above comment
This is a Printer comment
Text below comment

1x Blank Line

Read more comment
Text above comment
This is a read more comment
Text below comment

1x Blank Line

Souce Code

<h5>Attribute comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-grey-light fa-bookmark-o"><span class="text-sm text-grey-dark pl-1">This is an attribution text</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Bulleted comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-amber-lightest fa-circle-o"><span class="text-sm text-grey-dark pl-1">This is a bulleted comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Bug comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-pink fa-bug"><span class="text-sm text-grey-dark pl-1">This is a bug comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Favorite comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-amber fa-star"><span class="text-sm text-grey-dark pl-1">This is a favorite comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Class comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-red fa-apple"><span class="text-sm text-grey-dark pl-1">This is a class comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>News comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-grey fa-newspaper-o"><span class="text-sm text-grey-dark pl-1">This is a news comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Info comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-deeporange-lightest fa-comment-o"><span class="text-sm text-grey-dark pl-1">This is a inline comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Print comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-indigo fa-print"><span class="text-sm text-grey-dark pl-1">This is a Printer comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>

<h5>Read more comment</h5>
<div class="text-grey-lighter">Text above comment</div>
<div class="w-full icon-sm icon-grey-light fa-folder-open-o"><span class="text-sm text-grey-dark pl-1">This is a read more comment</span></div>
<div class="text-grey-lighter">Text below comment</div>
<p class="bl-1x">1x Blank Line</p>