Txt
<sl-txt> | SlTxt
Render text elements like headlines, copy and others like a champ.
<sl-txt h1>Headline 1</sl-txt> <sl-txt h2>Headline 2</sl-txt> <sl-txt p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</sl-txt> <sl-txt h2>Headline 2</sl-txt> <sl-txt p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</sl-txt> <sl-txt h3>Headline 3</sl-txt> <sl-txt p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</sl-txt> <sl-txt p> This is a paragraph with an <sl-txt span overline>overline span</sl-txt> inside it, and some <sl-txt span helper>helper span text</sl-txt> as well. </sl-txt> <sl-txt label size="m">Label size m</sl-txt>
Examples
Headings
Heading element from <sl-txt h1> to <sl-txt h6> to display titles and
section headers with semantic weight and style.
<sl-txt h1>Headline 1</sl-txt> <sl-txt h2>Headline 2</sl-txt> <sl-txt h3>Headline 3</sl-txt> <sl-txt h4>Headline 4</sl-txt> <sl-txt h5>Headline 5</sl-txt> <sl-txt h6>Headline 6</sl-txt>
Paragraph
Paragraph <sl-txt p> elements display standard block text with default styling.
<sl-txt p>Default paragraph text</sl-txt p>
Overline
Overline <sl-txt p overline> or <sl-txt span overline> are text
elements with various styles through attributes:
<sl-txt p overline>Overline paragraph text</sl-txt> <sl-txt span overline>helper span text</sl-txt>
Helper
Helper <sl-txt p helper> or <sl-txt span helper>are text elements used
for supplementary or descriptive text:
<sl-txt p helper>Helper paragraph text</sl-txt> <sl-txt span helper>helper span text</sl-txt>
Display Sizes
Display size attributes on <sl-txt p> or <sl-txt span> (e.g., l, xl,
xxl, xxxl, xxxxl) apply different large font sizes for emphasis:
<sl-txt p size="l">Display large paragraph text</sl-txt> <sl-txt span size="l">Display large span text</sl-txt> <sl-txt p size="xl">Display x-large paragraph text</sl-txt> <sl-txt p size="xxl">Display 2x-large paragraph text</sl-txt> <sl-txt p size="xxxl">Display 3x-large paragraph text</sl-txt> <sl-txt p size="xxxxl">Display 4x-large paragraph text</sl-txt>
Labels
Labels <sl-txt label> come with size variations from xxs to l to label UI elements with
different font sizes:
<sl-txt label size="xxs">Label size xxs</sl-txt> <sl-txt label size="xs">Label size xs</sl-txt> <sl-txt label size="s">Label size s</sl-txt> <sl-txt label size="m">Label size m</sl-txt> <sl-txt label size="l">Label size l</sl-txt>
Extending the element
If you need to apply specific styles to eg all your labels throughout your project, you may want to consider
extending the SlTxt class and create your own label component from it.
<my-label>Roses are red</my-label> <br> <my-label>Roses are red</my-label> <script type="module"> import { SlTxt } from '/dist/shoelace.js'; import { css } from 'https://unpkg.com/@lit/reactive-element@2.1.0/css-tag.js'; export class MyLabel extends SlTxt { // optionally override is() method to force element to be label and prevent other attributes from changing type and styles is(tagname) { return tagname === 'label' } static styles = [ SlTxt.styles, css` .label { color: red; } ` ]; } MyLabel.define('my-label'); </script>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://v2-48-10.yoummday-theme.pages.dev/components/txt/txt.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://v2-48-10.yoummday-theme.pages.dev/components/txt/txt.js';
To import this component using a bundler:
import '@yoummday/ymmd-shoelace/dist/components/txt/txt.js';
To import this component as a React component:
import SlTxt from '@yoummday/ymmd-shoelace/dist/react/txt';
Slots
| Name | Description |
|---|---|
| (default) | The default slot. |
Learn more about using slots.