base component

Blockquote

Theme-aware, responsive blockquote component.

@wrnexus/ui 0.5.013 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Blockquote
  quote="I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
  citation="citation"
  citationTitle="citationTitle"
  citationUrl="citationUrl"
  avatarSrc="avatarSrc"
/>

Legacy mount name: data-component="Blockquote".

Props and attributes

Prop	Type	Requirement	Default
`quote`	`string`	Optional	`"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."`
`citation`	`string`	Optional	`""`
`citationTitle`	`string`	Optional	`""`
`citationUrl`	`string`	Optional	`""`
`avatarSrc`	`string`	Optional	`""`
`avatarAlt`	`string`	Optional	`""`
`size`	`string`	Optional	`"md"`
`color`	`string`	Optional	`"primary"`
`align`	`string`	Optional	`"left"`
`variant`	`string`	Optional	`"default"`
`quoteMark`	`boolean`	Optional	`true`
`italic`	`boolean`	Optional	`true`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Blockquote.wrn

component Blockquote {
  props {
    quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
    citation = ""
    citationTitle = ""
    citationUrl = ""
    avatarSrc = ""
    avatarAlt = ""
    size = "md"
    color = "primary"
    align = "left"
    variant = "default"
    quoteMark = true
    italic = true
    class = ""
  }

  view {
        <figure
      {...attrs}
      class="wire-next wire-next--blockquote wire-next--color-{color} wire-next--size-{size} {class}"
      data-size="{size}"
      data-color="{color}"
      data-align="{align}"
      data-variant="{variant}"
      data-italic="{italic}"
    >
        <blockquote cite="{citationUrl}">
        {#if quoteMark}
          <span class="wire-next__blockquote-mark" aria-hidden="true">“</span>
        {/if}

        <div class="wire-next__blockquote-copy">
          {#if quote}
            <p>{quote}</p>
          {:else}
            <slot />
          {/if}
        </div>
        </blockquote>

      {#if citation || citationTitle || avatarSrc}
        <figcaption class="wire-next__blockquote-citation">
          {#if avatarSrc}
            <img
              class="wire-next__blockquote-avatar"
              src="{avatarSrc}"
              alt="{avatarAlt}"
              loading="lazy"
            />
          {/if}

          <span class="wire-next__blockquote-attribution">
            {#if citation}
              {#if citationUrl}
                <cite>
        <a href="{citationUrl}">{citation}</a>
        </cite>
              {:else}
                <cite>{citation}</cite>
              {/if}
            {/if}
            {#if citationTitle}<span>{citationTitle}</span>{/if}
          </span>
        </figcaption>
      {/if}
    </figure>
    }
}