HTML Elements

In addition to the basic HTML elements, the following are specially formatted HTML elements available in the template. Some have special classes.

Blockquote

"The first duty of every Starfleet officer is to the truth, whether it's scientific truth or historical truth or personal truth! It is the guiding principle on which Starfleet is based." -Captain Picard

HR - 2 Styles

The horizontal line HTML tag has an additional style - a disc. Both examples are shown.

<hr>

LCARS Bar

<div class="lcars-bar">

			  <div class="lcars-bar-inner"></div>

			</div>

LCARS Bar Style II

There is a second version to the LCARS bar which I use at the start of my footer. I wanted something unique to separate the footer from the rest of the content on a page.


			<div class="lcars-bar-slice-top"></div>

			<div class="lcars-bar">

			  <div class="lcars-bar-inner">

			    <div class="lcars-bar-cutout"></div>

			  </div>

			</div>

			<div class="lcars-bar-slice-bottom"></div>

Fancy Oval Bullet List

First item in a list

Second list item


				<div class="list-item">

				  <div class="list-item-left">

				    <div class="bullet"></div>

				  </div>

				  <div class="list-item-main">

				  First item in a list

				  </div>

				</div>

				<div class="list-item">

				  <div class="list-item-left">

				    <div class="bullet"></div>

				  </div>

				  <div class="list-item-main">

				  Second list item

				  </div>

				</div>

Blinking Elements

When you apply the class *blink*, *blink-slower*, or *blink-faster* to a text element, here are the results:

Alert


				<h3 class="blink">ALERT</h3>

Alert


				<h3 class="blink-slower">ALERT</h3>

Alert


				<h3 class="blink-faster">ALERT</h3>

Now let's change the color:

Alert


				<h3 class="blink-faster go-mars">ALERT</h3>

NOTE: The color/class name "go-mars" is taken from the LCARS Color Guide.

You can apply the "blink" class to any text element, such as paragraphs <p>, headings <h1>,<h2> etc., or the <span> tag. You can even make block elements blink, like buttons:

engage


				<div class="buttons">

				  <a href="" class="gold blink">engage</a>

				</div>

Please note the color/class name "gold" is also from the LCARS Color Guide.

HTML Image Elements

Please see USING IMAGES section.

LCARS Buttons

Please see BUTTONS section.