Lorem Ipsum
<quiet-lorem-ipsum>
Outputs placeholder text for testing designs with random content.
Placeholder text, commonly referred to as lorem ipsum, is useful for displaying the visual form of a document without using actual content. You can use this component instead of copying and pasting large quantities of text from online generators.
Unless you provide a seed, each refresh will yield unique content, allowing you to test the flexibility of your designs. The default behavior outputs a few sentences.
<quiet-lorem-ipsum></quiet-lorem-ipsum>
Examples Jump to heading
Titles & headings Jump to heading
Set the type attribute to title to generate text suitable for a title or heading.
The length attribute controls how many words will be output.
<h4><quiet-lorem-ipsum type="title" length="2-6"></quiet-lorem-ipsum></h4>
Some attributes herein allow you to specify a minimum and maximum range using the
{min}-{max} syntax, e.g. length="2-6".
Sentences Jump to heading
Set the type attribute to sentence to generate sentences. The
length attribute controls how many sentences are generated. You can specify how many words are
in each sentence with the words-per-sentence attribute.
<quiet-lorem-ipsum type="sentence" length="2-3"></quiet-lorem-ipsum>
Paragraphs Jump to heading
Set the type attribute to paragraph to generate HTML paragraphs. The
length attribute controls how many paragraphs are generated. Additional fine tuning can be done
with the words-per-sentence and sentences-per-paragraph attributes.
<quiet-lorem-ipsum type="paragraph" length="2-4"></quiet-lorem-ipsum>
Lists Jump to heading
Set the type attribute to ol or ul to generate HTML lists. The
length attribute controls how many list items are generated. The number of words in each list
item can be controlled with the words-per-sentence attribute.
<quiet-lorem-ipsum type="ol" length="3-6" words-per-sentence="2-3"></quiet-lorem-ipsum> <br> <quiet-lorem-ipsum type="ul" length="3-6" words-per-sentence="2-3"></quiet-lorem-ipsum>
Seeding the generator Jump to heading
By default, the generator will produce random content every time it runs. If you want to force the output to
be the same every time, provide a non-zero seed number using the seed attribute.
<quiet-slider label="Seed" min="1" max="5" value="3" with-markers with-tooltip style="margin-block-end: 2rem;" ></quiet-slider> <quiet-lorem-ipsum seed="3" id="lorem-ipsum__seed"></quiet-lorem-ipsum> <script> const loremIpsum = document.getElementById('lorem-ipsum__seed'); const slider = loremIpsum.previousElementSibling; slider.addEventListener('quiet-input', () => loremIpsum.seed = slider.value); </script>
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-lorem-ipsum> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/lorem-ipsum/lorem-ipsum.js';
To manually import <quiet-lorem-ipsum> from npm, use the following code.
import '@quietui/quiet/dist/components/lorem-ipsum/lorem-ipsum.js';
Properties Jump to heading
Lorem Ipsum has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
type
|
The type of HTML content to generate. |
|
'sentence'
|
'sentence'
|
length
|
The length of the content to generate, e.g. the number of words, sentences, paragraphs, or list
items. This should be a number or a range in the format of {min}-{max}, e.g.
2-4.
|
|
number
|
'3-5'
|
seed
|
By default, the generator will produce random content every time it runs. Use this option to seed the generator with a non-zero number and force it to output the same content every time. |
|
number
|
|
wordsPerSentence
words-per-sentence
|
The number of words that should occur in a sentence or list item. This should be a number or a range
in the format of {min}-{max}, e.g. 4-16.
|
|
number
|
'4-16'
|
sentencesPerParagraph
sentences-per-paragraph
|
The number of sentences that should occur in a paragraph. This should be a number or a range in the
format of
{min}-{max}, e.g. 3-6.
|
|
number
|
'3-6'
|