DummyText

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

Outputs dummy placeholder text. Supports multiple languages and text lengths.

How to use

Provided as DummyText from the @lism-css/ui package.

Import

import { DummyText } from '@lism-css/ui/astro';
// or
import { DummyText } from '@lism-css/ui/react';

Props

Property	Description
`lang`	Specifies the language. Defaults to `en`. Also supports `ja` and `ar`.
`length`	Specifies the length of the dummy text. Valid values are `xs`, `s`, `m`, `l`, `xl`, `codes`. Defaults to `m`.
`pre`	Specifies text to display before the dummy text.
`as`	Specifies the HTML tag. Defaults to `p`.
`offset`	Specifies an offset for the dummy text. Text is trimmed at `,` and `.` boundaries, so the resulting text will be shorter.

Examples

↓

Dummy text in different languages

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

<DummyText />
<DummyText lang="ja" />

↓

Dummy text at different lengths

xs: Lorem ipsum dolor sit amet.

s: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

m: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

l: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

xl: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint. Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

<DummyText length="xs" pre="xs: " />
<DummyText length="s" pre="s: " />
<DummyText length="m" pre="m: " />
<DummyText length="l" pre="l: " />
<DummyText length="xl" pre="xl: " />

↓

Setting length='codes' outputs dummy text containing <b>, <i>, <a>, and <code> elements.

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

<DummyText length="codes" />

↓

Example of offset

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

<DummyText length="xs" />
<DummyText offset={1} />
<DummyText length="l" offset={3} />