Component Library 2.13.1 (configured with Dummy App)
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="surface-demo" data-surface="dark">
  <div class="text-card" data-layout-style="quote">  
    <div class="text-card__decoration">
      <svg class="text-card__quote-mark" width="32" height="24" viewBox="0 0 32 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M10.1279 0C3.23232 5.51111 0 11.3778 0 16.6222C0 20.8889 3.87879 24 7.75758 24C11.2054 24 14.0067 21.6889 14.0067 18.8444C14.0067 15.2 10.7744 13.3333 6.03367 13.3333C6.03367 8.97778 7.64983 6.4 12.7138 2.13333L10.1279 0ZM28.1212 0C21.2256 5.51111 17.9933 11.3778 17.9933 16.6222C17.9933 20.8889 21.8721 24 25.7508 24C29.1987 24 32 21.6889 32 18.8444C32 15.2 28.7677 13.3333 24.0269 13.3333C24.0269 8.97778 25.6431 6.4 30.7071 2.13333L28.1212 0Z"/>
      </svg>
    </div>
    <div class="text-card__content">
      <div class="text-card__body">
        <p>The instructors made me feel welcome from the first session.</p>
      </div>
      <div class="text-card__quotee">
        <h3 class="text-card__title">Jo Bloggs</h3>
        <div class="text-card__subtitle">Member since 2019</div>
      </div>
    </div>
  </div>
</div>
1
2
3
<div class="surface-demo" data-surface="<%= surface %>">
  <%= render GllComponentLibrary::Patterns::TextCardComponent.new(pattern:) %>
</div>

A quote card on a bare surface, no panel: the card reads the surface contract on its own.

Param Description Input

—