Handy Lorem Ipsum Placeholder HTML5 Web Component

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]

HTML Attributes of the Tag

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

• paragraphs – The number of paragraphs to generate. Default: "5".
• show – Comma separated values, such as "link, ol, dl, headers, ul, bq, code, decorate". If none of these is set, only paragraphs will be rendered.
• length – The average length of a paragraph. Possible values are "short", "medium", "long", "verylong". The default value is "medium".

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.