Handy Lorem Ipsum Placeholder HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Tired of copy-pasting the same lorem ipsum text anytime you start a new web project? If you are, you will definitely love <acidjs-xlipsum></acidjs-xlipsum>, because it will do this and much more. Utilizing the excellent Loripsum API, developed by twokings.nl, the tag will generate not only plain text, but also headers, links, lists – you name it. Just like this:

[sourcecode language=”html”]
<acidjs-xlipsum></acidjs-xlipsum>
<acidjs-xlipsum
    paragraphs="7"
    length="short"
    show="link, ol, dl, headers, ul, bq, code, decorate">
</acidjs-xlipsum>
<acidjs-xlipsum show="link, ol, ul, allcaps"></acidjs-xlipsum>
<acidjs-xlipsum show="plaintext, prude"></acidjs-xlipsum>
[/sourcecode]

x-lipsum

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

For complete info, please visit Loripsum API.

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Categories and Tags
Links

© 2006 - 2025 Martin Ivanov