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
  • No Installation Fee

Standard

  • 4 CPU Cores
  • 6 GB RAM
  • 100GB Disk
  • 1 Gbps Port
  • Unlimited Bandwidth

Professional

  • 6 CPU Cores
  • 8 GB RAM
  • 250GB Disk
  • 1 Gbps Port
  • Unlimited Bandwidth

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

Moe Howard

Leader of the gang

Larry Fine

Larry Fine

The stooge in the middle

Curly Howard

Curly Howard

The funniest of them all

Shemp Howard

Shemp Howard

Not as funny

Joe DeRita

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

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

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

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

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

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

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

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

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

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

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.