← Catálogomedia · stable

Galerias

Galerias responsivas, bento, filmstrip e lightbox com navegação acessível. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Galerias quando a interface precisar de galerias responsivas, bento, filmstrip e lightbox com navegação acessível.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias

WIDE · stable

Lightbox (clássico)

Lightbox (clássico), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--lift" data-lightbox="true">
                        <div class="sc-gallery-item sc-card-hover sc-fade-up"><img src="/assets/slide (1).svg" alt="Imagem 1"></div>
                        <div class="sc-gallery-item sc-card-hover sc-fade-up"><img src="/assets/slide (2).svg" alt="Imagem 2"></div>
                        <div class="sc-gallery-item sc-card-hover sc-fade-up"><img src="/assets/slide (3).svg" alt="Imagem 3"></div>
                        <div class="sc-gallery-item sc-card-hover sc-fade-up"><img src="/assets/slide (4).svg" alt="Imagem 4"></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--liftsc-gallery-itemsc-card-hoversc-fade-up

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Square (clássico)

Square (clássico), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--square sc-gallery--lift" data-lightbox="true">
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (1).svg" alt="Square 1"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (2).svg" alt="Square 2"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (3).svg" alt="Square 3"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (4).svg" alt="Square 4"></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--squaresc-gallery--liftsc-gallery-itemsc-card-hover

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Caption (clássico)

Caption (clássico), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--lift" data-lightbox="true">
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (1).svg" alt="Caption 1"><div class="sc-gallery-caption">Legenda 1</div></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (2).svg" alt="Caption 2"><div class="sc-gallery-caption">Legenda 2</div></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (3).svg" alt="Caption 3"><div class="sc-gallery-caption">Legenda 3</div></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--liftsc-gallery-itemsc-card-hoversc-gallery-caption

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Masonry (clássico)

Masonry (clássico), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--masonry" data-lightbox="true">
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (1).svg" alt="Masonry 1"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (2).svg" alt="Masonry 2"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (3).svg" alt="Masonry 3"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (4).svg" alt="Masonry 4"></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--masonrysc-gallery-itemsc-card-hover

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Spans (grid) (clássico)

Spans (grid) (clássico), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-6 sc-gap-4">
                        <div class="sc-gallery-item sc-col-span-4 sc-card-hover"><img src="/assets/slide (1).svg" alt="Span 4"></div>
                        <div class="sc-gallery-item sc-col-span-2 sc-card-hover"><img src="/assets/slide (2).svg" alt="Span 2"></div>
                        <div class="sc-gallery-item sc-col-span-3 sc-card-hover"><img src="/assets/slide (3).svg" alt="Span 3"></div>
                        <div class="sc-gallery-item sc-col-span-3 sc-card-hover"><img src="/assets/slide (4).svg" alt="Span 3"></div>
                      </div>

Classes, JavaScript e API

sc-gridsc-cols-6sc-gap-4sc-gallery-itemsc-col-span-4sc-card-hoversc-col-span-2sc-col-span-3

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Sem lightbox (clássico)

Sem lightbox (clássico), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--lift" data-lightbox="false">
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (1).svg" alt="Sem lightbox 1"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (2).svg" alt="Sem lightbox 2"></div>
                        <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (3).svg" alt="Sem lightbox 3"></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--liftsc-gallery-itemsc-card-hover

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Reveal captions (novo)

Reveal captions (novo), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--reveal sc-gallery--lift" data-lightbox="true">
                        <div class="sc-gallery-item"><img src="/assets/slide (1).svg" alt="Reveal 1"><div class="sc-gallery-caption">Projeto • Landing</div></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (2).svg" alt="Reveal 2"><div class="sc-gallery-caption">Projeto • App</div></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (3).svg" alt="Reveal 3"><div class="sc-gallery-caption">Projeto • Branding</div></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (4).svg" alt="Reveal 4"><div class="sc-gallery-caption">Projeto • Motion</div></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--revealsc-gallery--liftsc-gallery-itemsc-gallery-caption

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Bento grid (novo)

Bento grid (novo), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--bento sc-gallery--lift" data-lightbox="true">
                        <div class="sc-gallery-item"><img src="/assets/slide (1).svg" alt="Bento 1"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (2).svg" alt="Bento 2"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (3).svg" alt="Bento 3"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (4).svg" alt="Bento 4"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (5).svg" alt="Bento 5"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (6).svg" alt="Bento 6"></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--bentosc-gallery--liftsc-gallery-item

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Filmstrip (horizontal scroll) (novo)

Filmstrip (horizontal scroll) (novo), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--filmstrip" data-lightbox="true">
                        <div class="sc-gallery-track sc-scroll">
                          <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (1).svg" alt="Strip 1"></div>
                          <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (2).svg" alt="Strip 2"></div>
                          <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (3).svg" alt="Strip 3"></div>
                          <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (4).svg" alt="Strip 4"></div>
                          <div class="sc-gallery-item sc-card-hover"><img src="/assets/slide (5).svg" alt="Strip 5"></div>
                        </div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--filmstripsc-gallery-tracksc-scrollsc-gallery-itemsc-card-hover

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Polaroid stack (novo)

Polaroid stack (novo), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--polaroid" data-lightbox="true">
                        <div class="sc-gallery-item"><img src="/assets/slide (1).svg" alt="Polaroid 1"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (2).svg" alt="Polaroid 2"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (3).svg" alt="Polaroid 3"></div>
                        <div class="sc-gallery-item"><img src="/assets/slide (4).svg" alt="Polaroid 4"></div>
                      </div>

Classes, JavaScript e API

sc-gallerysc-gallery--polaroidsc-gallery-item

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Editorial mosaic

Editorial mosaic, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--masonry" data-lightbox="true"><button class="sc-gallery-item" type="button"><img src="/assets/slide (1).svg" alt="Editorial mosaic 1"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (2).svg" alt="Editorial mosaic 2"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (3).svg" alt="Editorial mosaic 3"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (4).svg" alt="Editorial mosaic 4"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (5).svg" alt="Editorial mosaic 5"></button></div>

Classes, JavaScript e API

sc-gallerysc-gallery--masonrysc-gallery-item

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
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.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

WIDE · stable

Immersive showcase

Immersive showcase, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-gallery sc-gallery--bento" data-lightbox="true"><button class="sc-gallery-item" type="button"><img src="/assets/slide (1).svg" alt="Immersive showcase 1"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (2).svg" alt="Immersive showcase 2"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (3).svg" alt="Immersive showcase 3"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (4).svg" alt="Immersive showcase 4"></button><button class="sc-gallery-item" type="button"><img src="/assets/slide (5).svg" alt="Immersive showcase 5"></button></div>

Classes, JavaScript e API

sc-gallerysc-gallery--bentosc-gallery-item

Inicialize lightbox após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: lightbox
Dependências: smart-ui.js
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.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

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.

Galerias

Componentes relacionados