Navigation

The navigation component can be added multiple times to a page. The navigation can be altered by changing the variables in the _settings.sass or adding color styles to the markup

Buttons

To create a button style you can just add a .btn class to your anchor or button elements. Optionally you can add additional classes to style the element color, size or stylization.

To change color just add the following code .btn--primary .btn--secondary .btn--info .btn--warning .btn--success .btn--danger

Add more color buttons.

When any additional colors are added to any of the color maps the new button will be automatically be generated.

<a href="#" class="btn">Button</a>
<a href="#" class="btn btn--default">Button</a>
<a href="#" class="btn btn--primary">Button</a>
<a href="#" class="btn btn--secondary">Button</a>
<a href="#" class="btn btn--dark">Button</a>
<a href="#" class="btn btn--info">Button</a>
<a href="#" class="btn btn--warning">Button</a>
<a href="#" class="btn btn--succeess">Button</a>
<a href="#" class="btn btn--danger">Button</a>

Gradient Buttons

To add a subtle gradient to a button you can just append -gradient at the end of any of the styled buttons.

<a href="#" class="btn btn--primary-gradiant">Button</a>

Rounded Buttons

Buttons can also be made rounder by prepending -gradient at the end of any btn element.

<a href="#" class="btn btn--round">Button</a>

Button Sizes

To change button size, add one of the following classes to the .btn class. .btn--xs .btn--sm .btn--md .btn--lg .btn--xl

<a href="#" class="btn btn--xl">Button</a>
<a href="#" class="btn btn--sm">Button</a>
<a href="#" class="btn btn--md">Button</a> <!-- default -->
<a href="#" class="btn btn--lg">Button</a>
<a href="#" class="btn btn--xl">Button</a>

Button Icons

Lunacon Icon can be placed ever on left or right. .btn__icon--left or .btn__icon--right

<a class="btn"><i class="btn__icon--left lunacon lunacon-moon-solid"></i>Button</a>
<a class="btn">Button<i class="btn__icon--right lunacon lunacon-moon-solid"></i></a>
<a class="btn"><i class="btn__icon lunacon lunacon-moon-solid"></i></a>

Block Button

This block element will stretch the button to fill the parent element. Just add .btn--block to the button element.

<div class="column">
 <a href="#" class="btn btn--primary btn--block">Block Button</a>
</div>

Block Button

Grouped Button

Grouping button elements

When using more than one .btn class, just wrap all the .btn in a .btn__group

<div clas="btn__group">
  <a href="#" class="btn btn--primary">Button</a>
  <a href="#" class="btn btn--primary">Button</a>
  <a href="#" class="btn btn--primary">Button</a>
  <a href="#" class="btn btn--primary">Button</a>
</a>

Blockquotes

A simple blockquote element

Pagination

A simple pagination wrapper.

Media Object

The media object is ideal for comment, listing product or categories.

This element works great for comments and listings.

Accordian Element

Each accordion element performs as an individual component with its own active state and easy to customize in the _settings.sass file.

Accordian Default

• Who owns the international space station?
  International Space Station Legal Framework. The International Space Station is a co-operative programme between Europe, the United States, Russia, Canada, and Japan for the joint development, operation and utilisation of a permanently inhabited Space Station in low Earth orbit
• How many space stations are there in total?
  There are only two space stations currently in orbit - the International Space Station and China's Tiangong-1. ISS is manned at all times and Tiangong-1 is unmanned most of the time.
• What is the name of the world's first space station?
  The first space station was Salyut 1, which was launched by the Soviet Union on April 19, 1971. Like all the early space stations, it was "monolithic", intended to be constructed and launched in one piece, and then inhabited by a crew later.
• Can you see the space station?
  The space station looks like a fast-moving plane in the sky, but it will be seen as a steady – not blinking – white pinpoint of light. Typically it will be the brightest object in the night sky (except for the Moon). It is bright enough that it can even be seen from the middle of a city!

<ul class="accordian">
  <li class="accordian__element"> 
    <header class="accordian__header accordian__header--active">[..]</header>
    <section class="accordian__body accordian__body--active">[..] </section>
  </li>
  <li class="accordian__element"> 
    <header class="accordian__header">[..]</header>
    <section class="accordian__body">[..] </section>
  </li>
</ul>

Set a active class to component.

To create an open tab simply follow the code example above. The .accordian__{elem}--active will start with open tab.

Accordian spaced

To add some spacing between elements just add .accordian--spaced to the .accordian element.

• how was the first man on the moon?

  Neil Armstrong

  Apollo 11's mission was to land two men on the moon. They also had to come back to Earth safely. Apollo 11 blasted off on July 16, 1969. Neil Armstrong, Edwin "Buzz" Aldrin and Michael Collins were the astronauts on Apollo

• Who was the first woman to walk on the moon?

  Sally Ride

  It was the Cold War. NASA wouldn't accept women applicants to the astronaut corps until 1978. The first American woman to fly into space aboard the space shuttle was Sally Ride in 1983, and the glass stratosphere was finally shattered

• Who was the very first astronaut?

  Yuri Gagarin

  The Mercury Project suffered some early setbacks, however, and on April 12, 1961, Soviet cosmonaut Yuri Gagarin orbited Earth in the world's first manned space flight. Less than one month later, on May 5, astronaut Alan Shepard was successfully launched into space on a suborbital fligh

• Who was the first animal on the moon?

  Albert

  A rhesus monkey called Albert 1 became the first monkey launched into space on June 11, 1948; also on board a US-launched V2 rocket. These were just suborbital flights, though. The first animal to actually go into orbit was the dog Laika, launched on board the Soviet Sputnik 2 spacecraft on November 3, 1957

<ul class="accordian accordian--spaced">
  <li class="accordian__element"> 
    <header class="accordian__header">[..]</header>
    <section class="accordian__body">[..] </section>
  </li>
</ul>