Use Testimonials quando a interface precisar de prova social, logos e depoimentos com leitura acessível.
Testimonials
Prova social, logos e depoimentos com leitura acessível. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Base
Prova social, logos e depoimentos com leitura acessível.
HTML e exemplo
<article class="sc-testimonial">Testimonials</article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Usar HTML semântico e foco visível.
- Fornecer rótulo acessível quando não houver texto visível.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Quote
Quote, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Quote · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Profile
Profile, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Profile · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Company
Company, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Company · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Metric
Metric, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Metric · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Video
Video, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Video · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Carousel item
Carousel item, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Carousel item · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Wall
Wall, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Wall · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Case
Case, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Case · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Compact
Compact, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<figure class="sc-card sc-showcase-quote"><blockquote>“Conseguimos organizar o produto sem perder velocidade nem identidade.”</blockquote><figcaption><span class="sc-showcase-avatar">M</span><div><strong>Marina Costa</strong><small>Compact · liderança de produto</small></div></figcaption></figure>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.