Typography & Styles

The fonts used when creating Metal Box were selected based on readability and availability. To avoid any surprises, only Sans-serif, Web safe fonts are used throughout this design.

Intro Text Option

This is an example of how the intro text can look by using the <p class="intro">. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget purus at dolor volutpat placerat sit amet at nibh. Maecenas et dolor a ante sagittis lobortis. Mauris at metus neque. Phasellus arcu leo, porta nec pretium sed, consequat non nunc.

Image Float Left or Right

By using the <img class="left"> or <img class="right"> you can easily float an image either left or right and wrap the text around the image as seen. It's so easy!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget purus at dolor volutpat placerat sit amet at nibh. Maecenas et dolor a ante sagittis lobortis. Mauris at metus neque. Phasellus arcu leo, porta nec pretium sed, consequat non nunc. Praesent vitae eros non eros porttitor suscipit non vitae elit. Aenean tristique ultrices imperdiet. Etiam vel rhoncus lacus. Ut justo libero, pulvinar at blandit nec, feugiat ac turpis. In luctus odio tempor enim laoreet et interdum ligula pulvinar. Nunc malesuada tempus libero, nec molestie turpis faucibus vel. Sed sodales rhoncus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget purus at dolor volutpat placerat sit amet at nibh. Maecenas et dolor a ante sagittis lobortis. Mauris at metus neque. Phasellus arcu leo, porta nec pretium sed, consequat non nunc. Praesent vitae eros non eros porttitor suscipit non vitae elit. Aenean tristique ultrices imperdiet. Etiam vel rhoncus lacus. Ut justo libero, pulvinar at blandit nec, feugiat ac turpis. In luctus odio tempor enim laoreet et interdum ligula pulvinar. Nunc malesuada tempus libero, nec molestie turpis faucibus vel. Sed sodales rhoncus faucibus.

 

H1 Header Appears Like This

H2 Header Appears Like This

H3 Header Appears Like This

H4 Header Appears Like This

H5 Header Appears Like This

H6 Header Appears Like This *Notice the fine line below this header option.*

Text below <h6> tag

 

Unordered List - Square

<ul class="square">

• Who We Are
• What We Do
• Where We Are
• How We Can Help

Unordered List - Circle

<ul class="circle">

• Who We Are
• What We Do
• Where We Are
• How We Can Help

Unordered List - Disc

<ul class="square">

• Who We Are
• What We Do
• Where We Are
• How We Can Help

Ordered List

<ol>

1. Who We Are
2. What We Do
3. Where We Are
4. How We Can Help