Default Template
Default Cards
class="cards"
The default behavior for cards is pretty simple.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus mauris, porttitor eu diam euismod, vestibulum condimentum velit. Fusce pellentesque purus et vestibulum ultricies. Donec sollicitudin consectetur finibus. Quisque malesuada fringilla eros eget maximus. Nunc ornare a mauris sit amet tristique. Integer varius sed lectus quis suscipit. Phasellus sed molestie eros. Vestibulum ut neque vel metus rutrum ultricies.
Heading
Sed egestas metus in auctor bibendum. Ut gravida ligula a diam gravida, non convallis nisl lacinia. Sed at lorem ex. Quisque maximus ex vel odio malesuada, ut venenatis massa posuere. Nulla eu turpis blandit, varius ligula eu, elementum nisi. Vestibulum nec posuere purus, ut condimentum nulla. Pellentesque lorem ipsum, eleifend vitae vulputate eu, scelerisque sed elit. Pellentesque at malesuada nulla, quis fermentum magna.
Heading
Morbi lobortis, lacus a dignissim iaculis, dolor massa ultrices augue, id maximus nunc quam pulvinar nulla. Suspendisse arcu augue, aliquam vitae ultrices ac, venenatis a mi. Ut erat ex, tincidunt et sagittis nec, pharetra eget odio. Nunc porta risus augue, nec consectetur nisi rhoncus sed. Donec vel sapien eu lacus volutpat blandit. Nam porta elementum ante nec efficitur. Maecenas ultrices sed mi ac tincidunt.
Default Cards
class="cards"
The default behavior for cards is pretty simple.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus mauris, porttitor eu diam euismod, vestibulum condimentum velit. Fusce pellentesque purus et vestibulum ultricies. Donec sollicitudin consectetur finibus. Quisque malesuada fringilla eros eget maximus. Nunc ornare a mauris sit amet tristique. Integer varius sed lectus quis suscipit. Phasellus sed molestie eros. Vestibulum ut neque vel metus rutrum ultricies.
Heading
Sed egestas metus in auctor bibendum. Ut gravida ligula a diam gravida, non convallis nisl lacinia. Sed at lorem ex. Quisque maximus ex vel odio malesuada, ut venenatis massa posuere. Nulla eu turpis blandit, varius ligula eu, elementum nisi. Vestibulum nec posuere purus, ut condimentum nulla. Pellentesque lorem ipsum, eleifend vitae vulputate eu, scelerisque sed elit. Pellentesque at malesuada nulla, quis fermentum magna.
Heading
Morbi lobortis, lacus a dignissim iaculis, dolor massa ultrices augue, id maximus nunc quam pulvinar nulla. Suspendisse arcu augue, aliquam vitae ultrices ac, venenatis a mi. Ut erat ex, tincidunt et sagittis nec, pharetra eget odio. Nunc porta risus augue, nec consectetur nisi rhoncus sed. Donec vel sapien eu lacus volutpat blandit. Nam porta elementum ante nec efficitur. Maecenas ultrices sed mi ac tincidunt.
Vanilla Cards
class="cards vanilla"
The default behavior for cards is pretty simple.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus mauris, porttitor eu diam euismod, vestibulum condimentum velit. Fusce pellentesque purus et vestibulum ultricies. Donec sollicitudin consectetur finibus. Quisque malesuada fringilla eros eget maximus. Nunc ornare a mauris sit amet tristique. Integer varius sed lectus quis suscipit. Phasellus sed molestie eros. Vestibulum ut neque vel metus rutrum ultricies.
Heading
Sed egestas metus in auctor bibendum. Ut gravida ligula a diam gravida, non convallis nisl lacinia. Sed at lorem ex. Quisque maximus ex vel odio malesuada, ut venenatis massa posuere. Nulla eu turpis blandit, varius ligula eu, elementum nisi. Vestibulum nec posuere purus, ut condimentum nulla. Pellentesque lorem ipsum, eleifend vitae vulputate eu, scelerisque sed elit. Pellentesque at malesuada nulla, quis fermentum magna.
Heading
Morbi lobortis, lacus a dignissim iaculis, dolor massa ultrices augue, id maximus nunc quam pulvinar nulla. Suspendisse arcu augue, aliquam vitae ultrices ac, venenatis a mi. Ut erat ex, tincidunt et sagittis nec, pharetra eget odio. Nunc porta risus augue, nec consectetur nisi rhoncus sed. Donec vel sapien eu lacus volutpat blandit. Nam porta elementum ante nec efficitur. Maecenas ultrices sed mi ac tincidunt.
Vanilla Framed Cards
class="cards vanilla framed"
The default behavior for cards is pretty simple.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus mauris, porttitor eu diam euismod, vestibulum condimentum velit. Fusce pellentesque purus et vestibulum ultricies. Donec sollicitudin consectetur finibus. Quisque malesuada fringilla eros eget maximus. Nunc ornare a mauris sit amet tristique. Integer varius sed lectus quis suscipit. Phasellus sed molestie eros. Vestibulum ut neque vel metus rutrum ultricies.
Heading
Sed egestas metus in auctor bibendum. Ut gravida ligula a diam gravida, non convallis nisl lacinia. Sed at lorem ex. Quisque maximus ex vel odio malesuada, ut venenatis massa posuere. Nulla eu turpis blandit, varius ligula eu, elementum nisi. Vestibulum nec posuere purus, ut condimentum nulla. Pellentesque lorem ipsum, eleifend vitae vulputate eu, scelerisque sed elit. Pellentesque at malesuada nulla, quis fermentum magna.
Heading
Morbi lobortis, lacus a dignissim iaculis, dolor massa ultrices augue, id maximus nunc quam pulvinar nulla. Suspendisse arcu augue, aliquam vitae ultrices ac, venenatis a mi. Ut erat ex, tincidunt et sagittis nec, pharetra eget odio. Nunc porta risus augue, nec consectetur nisi rhoncus sed. Donec vel sapien eu lacus volutpat blandit. Nam porta elementum ante nec efficitur. Maecenas ultrices sed mi ac tincidunt.
Pricing Cards
class="cards pricing framed"
Below you'll find some samples of how to format your typical pricing plans. "Elemental HTML" uses minimal classes and relies upon a semantic and logical structure to accomplish this.
Economy
- 2 CPU Cores
- 2 GB RAM
- 50GB Disk
- 1 Gbps Port
- Unlimited Bandwidth
- $10/mo
- No Installation Fee
Standard
- 4 CPU Cores
- 6 GB RAM
- 100GB Disk
- 1 Gbps Port
- Unlimited Bandwidth
- $20/mo
Professional
- 6 CPU Cores
- 8 GB RAM
- 250GB Disk
- 1 Gbps Port
- Unlimited Bandwidth
- $45/mo
Porthole Cards
class="cards icons portholes"
This actually uses markup shockingly similar to the pricing cards above. The only major changes are the use of a different outer class and inclusion of the avatar images.
Moe Howard
Leader of the gang
Larry Fine
The stooge in the middle
Curly Howard
The funniest of them all
Shemp Howard
Not as funny
Joe DeRita
A poor substitute
Landscape Disc Cards
class="cards icons landscape discs"
Exact same markup as above apart from adding "landscape" to the outermost class.
And the less said about Joe Besser's stint with the troupe, the better.
Moe Howard
The take-charge leader of the team. Moe oft seemed to be a short-tempered bully, yet was also very loyal and protective of the other Stooges.
Larry Fine
The voice of reason -- if there can be such a thing amongst the stooges -- he typically sided with whoever was right, not blindly following who was in charge.
Curly Howard
The king of slapstick, he was the butt of most every joke and took the most abuse... even from the other stooges. Despite this he remained bright, cheerful, and a joy to watch.
Shemp Howard
If Curly was bright, Shemp played the dimwit. Whilst not a fan favorite, he was the original "third stooge" and had a resonably successful career outside the Stooges.
Joe DeRita
DeRita's stint as a stooge was marred by the general impression of being a watered down mild mannered ripoff of Curly's character. They even called him "Curly Joe" to further project that idea, which made it even less tolerable.
Landscape Framed Cards
class="cards icons landscape framed"
Same as the previous section, but "framed" and without "discs". I used a taller image for "Curly Joe" so you can see how taller images are handled here.
Moe Howard
The take-charge leader of the team. Moe oft seemed to be a short-tempered bully, yet was also very loyal and protective of the other Stooges.
Larry Fine
The voice of reason -- if there can be such a thing amongst the stooges -- he typically sided with whoever was right, not blindly following who was in charge.
Curly Howard
The king of slapstick, he was the butt of most every joke and took the most abuse... even from the other stooges. Despite this he remained bright, cheerful, and a joy to watch.
Shemp Howard
If Curly was bright, Shemp played the dimwit. Whilst not a fan favorite, he was the original "third stooge" and had a resonably successful career outside the Stooges.
Joe DeRita
DeRita's stint as a stooge was marred by the general impression of being a watered down mild mannered ripoff of Curly's character. They even called him "Curly Joe" to further project that idea, which made it even less tolerable.
Stacks
class="stacks"
"stacks" are sections of subcontent that are layered one top the other at full width of the parent container, up to the --flow-max-width defined in elementals.vars.screen.css. Note that any <time> tags inside H3 are placed to the right.
Sample Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta enim dolor, et interdum ligula condimentum vitae. Duis sit amet pharetra nisl. In tincidunt mauris et arcu vehicula volutpat. Curabitur interdum nunc lectus. Duis accumsan metus nec felis maximus sagittis. Aenean erat mauris, congue quis libero sit amet, pellentesque fringilla velit. Praesent a elementum nulla. Quisque laoreet lobortis elit. Morbi vel ante nibh.
Sample Section
Etiam dictum eros congue sapien elementum, eu lobortis nunc sagittis. Integer et suscipit tellus. Duis ligula massa, pulvinar et volutpat non, dictum eu massa. Vivamus maximus metus non arcu congue semper. In ac justo non sapien hendrerit vehicula nec ut libero. Proin efficitur consequat porta. Vivamus imperdiet urna sed quam porttitor, id varius lorem accumsan. Vivamus leo dolor, euismod at porta in, ultrices sed orci. Ut neque ex, venenatis mattis ultricies eu, faucibus sit amet turpis. Ut consequat sit amet nulla ac accumsan. Maecenas tristique augue in accumsan ultricies. Curabitur ac ultrices lacus, in pretium dui. Quisque nec felis id enim fermentum tincidunt.
Another Sample
Aliquam vehicula augue et leo accumsan sodales. Pellentesque ac ullamcorper urna. Vestibulum commodo malesuada finibus. Sed viverra orci est, at sodales felis blandit non. Donec fringilla, risus id consequat commodo, risus enim maximus magna, congue ullamcorper nulla ipsum a magna. Nulla convallis massa a diam imperdiet, aliquam scelerisque lectus venenatis. Cras in euismod ex. Cras ultrices odio nec pulvinar imperdiet. Nunc luctus ornare mi, vel auctor diam eleifend vel. Curabitur cursus purus a sapien semper placerat.
Framed Stacks
class="stacks framed"
"stacks" are sections of subcontent that are layered one top the other at full width of the parent container, up to the --flow-max-width defined in elementals.vars.screen.css. Note that any <time> tags inside H3 are placed to the right.
Sample Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta enim dolor, et interdum ligula condimentum vitae. Duis sit amet pharetra nisl. In tincidunt mauris et arcu vehicula volutpat. Curabitur interdum nunc lectus. Duis accumsan metus nec felis maximus sagittis. Aenean erat mauris, congue quis libero sit amet, pellentesque fringilla velit. Praesent a elementum nulla. Quisque laoreet lobortis elit. Morbi vel ante nibh.
Sample Section
Etiam dictum eros congue sapien elementum, eu lobortis nunc sagittis. Integer et suscipit tellus. Duis ligula massa, pulvinar et volutpat non, dictum eu massa. Vivamus maximus metus non arcu congue semper. In ac justo non sapien hendrerit vehicula nec ut libero. Proin efficitur consequat porta. Vivamus imperdiet urna sed quam porttitor, id varius lorem accumsan. Vivamus leo dolor, euismod at porta in, ultrices sed orci. Ut neque ex, venenatis mattis ultricies eu, faucibus sit amet turpis. Ut consequat sit amet nulla ac accumsan. Maecenas tristique augue in accumsan ultricies. Curabitur ac ultrices lacus, in pretium dui. Quisque nec felis id enim fermentum tincidunt.
Another Sample
Aliquam vehicula augue et leo accumsan sodales. Pellentesque ac ullamcorper urna. Vestibulum commodo malesuada finibus. Sed viverra orci est, at sodales felis blandit non. Donec fringilla, risus id consequat commodo, risus enim maximus magna, congue ullamcorper nulla ipsum a magna. Nulla convallis massa a diam imperdiet, aliquam scelerisque lectus venenatis. Cras in euismod ex. Cras ultrices odio nec pulvinar imperdiet. Nunc luctus ornare mi, vel auctor diam eleifend vel. Curabitur cursus purus a sapien semper placerat.
Icon Stacks
class="stacks icons"
These "stacks" show off how Elemental HTML also works with font-awesome icons and is built to out of the box size and place them as "subject" icons just like you would images!
Stacks with images/icons have a larger max-width so that we can retain the "flow width" on the paragraphs.
Note, currently icon stacks are not compatible with framing.
Sample Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta enim dolor, et interdum ligula condimentum vitae. Duis sit amet pharetra nisl. In tincidunt mauris et arcu vehicula volutpat. Curabitur interdum nunc lectus. Duis accumsan metus nec felis maximus sagittis. Aenean erat mauris, congue quis libero sit amet, pellentesque fringilla velit. Praesent a elementum nulla. Quisque laoreet lobortis elit. Morbi vel ante nibh.
Sample Section
Etiam dictum eros congue sapien elementum, eu lobortis nunc sagittis. Integer et suscipit tellus. Duis ligula massa, pulvinar et volutpat non, dictum eu massa. Vivamus maximus metus non arcu congue semper. In ac justo non sapien hendrerit vehicula nec ut libero. Proin efficitur consequat porta. Vivamus imperdiet urna sed quam porttitor, id varius lorem accumsan. Vivamus leo dolor, euismod at porta in, ultrices sed orci. Ut neque ex, venenatis mattis ultricies eu, faucibus sit amet turpis. Ut consequat sit amet nulla ac accumsan. Maecenas tristique augue in accumsan ultricies. Curabitur ac ultrices lacus, in pretium dui. Quisque nec felis id enim fermentum tincidunt.
Another Sample
Aliquam vehicula augue et leo accumsan sodales. Pellentesque ac ullamcorper urna. Vestibulum commodo malesuada finibus. Sed viverra orci est, at sodales felis blandit non. Donec fringilla, risus id consequat commodo, risus enim maximus magna, congue ullamcorper nulla ipsum a magna. Nulla convallis massa a diam imperdiet, aliquam scelerisque lectus venenatis. Cras in euismod ex. Cras ultrices odio nec pulvinar imperdiet. Nunc luctus ornare mi, vel auctor diam eleifend vel. Curabitur cursus purus a sapien semper placerat.