Quote
This new component is marked as untested because the full accessibility test is still pending. The full test of new components and functionalities can only take place after a completed release.
The Quote component has two variants, a short body text ("inline") and an indented ("block") variant. Both versions contain a link to the source of the quote.
Construction
Code
<kol-quote
_label="RFC 1149"
_href="https://datatracker.ietf.org/doc/html/rfc1149"
_quote="Avian carriers can provide high delay, low throughput, and low altitude
service. The connection topology is limited to a single point-to-point path
for each carrier, used with standard carriers, but many carriers can be used
without significant interference with each other, outside early spring.
This is because of the 3D ether space available to the carriers, in contrast
to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
avoidance system, which increases availability."
_variant="block"
>
</kol-quote>
<kol-quote
_label="RFC 1149"
_href="https://datatracker.ietf.org/doc/html/rfc1149"
_quote="Avian carriers can provide high delay."
_variant="inline"
></kol-quote>
Examples
Usage
A heading can be set using _label, while _quote contains the actual quote. The origin is set via _href. The inline variant is standard, if indented is desired, _variant can be set to block.
References
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_href (required) | _href | Sets the target URI of the link or citation source. | string | undefined |
_label | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined | undefined |
_quote (required) | _quote | Defines the text of the quote. | string | undefined |
_variant | _variant | Defines which variant should be used for presentation. | "block" | "inline" | undefined | 'inline' |