Componentes

grid

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

35 de 35

Masonry flow

1532Masonry flowLayoutUma parede de alvenaria que agrupa ladrilhos de alturas variadas em colunas, levanta cada um deles à medida que aparece e recoloca toda a grade quando a contagem de colunas muda.

1552Blocks iconÍconesTrês blocos quadrados dispostos em L, saltando um após o outro como peças sendo encaixadas no lugar.

1568Layout dashboard iconÍconesQuatro blocos de painel em duas colunas irregulares, cada um respirando por sua vez, de modo que a grade ondula da parte superior esquerda para a parte inferior direita.

Blinking grid pattern

1668Blinking grid patternFundosUma grade quadrada fina onde células dispersas desaparecem e desaparecem, cada uma saltando para uma célula nova quando seu piscar termina.

Blur reveal

1669Blur revealAnimaçãoUm wrapper que mantém seu filho fora de foco e ligeiramente deslocado até que ele entre pela primeira vez na janela de visualização e, em seguida, resolva o desfoque e feche a lacuna em um movimento.

Cursor trail grid

1681Cursor trail gridFundosUma grade de células contornadas que se acendem sob o ponteiro e esfriam lentamente à medida que ele avança, deixando um rastro desbotado.

1693Flickering glyph gridFundosUma grade densa de caracteres monoespaçados onde um punhado aleatório troca letras e cores a cada tique, alternando entre os tons conforme avança.

Flickering square mesh

1694Flickering square meshFundosUma malha de tela de pequenos quadrados onde células aleatórias ganham um novo brilho a cada quadro, proporcionando uma estática inquieta que nunca se repete.

Graph paper grid

1702Graph paper gridFundosUma grade repetitiva de linhas finas que se espalha pelo recipiente, desbotando em direção às bordas, com um pequeno aglomerado de células que se iluminam com uma cor acentuada e desaparecem novamente.

Hex cell grid

1706Hex cell gridFundosUm favo de mel de células hexagonais recortadas que acendem sob o ponteiro e esfriam novamente, deixando um rastro desbotado.

Perspective floor grid

1731Perspective floor gridFundosUm plano de grade inclinado para longe da câmera, recuando para o horizonte e deslizando em direção ao observador em um loop contínuo de uma célula.

Pointer lit lattice

1733Pointer lit latticeFundosUma treliça de tela cujas células iluminam-se à medida que o ponteiro passa, segura e depois decai, com uma pressão enviando um anel de luz que se expande para os cantos mais distantes.

Scanning wire grid

1744Scanning wire gridFundosUma fina grade de arame em perspectiva inclina-se com o ponteiro enquanto uma faixa brilhante a percorre em um loop, iluminando cada linha que ela cruza.

Shockwave dot grid

1746Shockwave dot gridFundosUma grade de pontos que tinge em direção ao cursor e se projeta em um anel quando você clica ou passa o dedo sobre ela.

Tilted tile parallax

1753Tilted tile parallaxFundosFileiras de blocos rotulados em uma grade inclinada de grandes dimensões deslizam em direções opostas conforme o ponteiro cruza, cada linha chegando em seu próprio atraso.

Warped tile tunnel

1761Warped tile tunnelFundosUm cenário escuro repleto de quadrados brilhantes que se projetam através de uma lente, com anéis de brilho projetando-se para fora do centro para sempre.

Bobble tile grid

1763Bobble tile gridAnimaçãoUma grade de peças coloridas que se afastam do ponteiro em uma mola, saltando com mais força à medida que o ponteiro passa por elas.

Iron filings field

1781Iron filings fieldAnimaçãoUma grade quadrada de pequenos traços que giram para apontar para o ponteiro, como limalhas de ferro se prendendo a um ímã arrastado sobre elas.

Pixel Wake

1793Pixel WakeCursorUma grade grossa de células acende sob o ponteiro e esfria atrás dele, deixando um rastro em bloco no painel.

Tilt Spotlight Grid

1817Tilt Spotlight GridCartõesUma grade de capacidade onde o cartão pairado se inclina em direção ao ponteiro e acende enquanto todos os outros cartões escurecem e encolhem.

Tilting cube field

1818Tilting cube fieldAnimaçãoUma grade de cubos ocos que se inclinam em direção ao ponteiro dentro de um raio de queda, vagam por conta própria quando deixados sozinhos e brilham em anéis com um clique.

Activity cell heatmap

1840Activity cell heatmapGráficosUma grade de calendário com pequenos quadrados coloridos que se estende em uma onda diagonal e permite que uma faixa de nível isole uma intensidade de cada vez.

Edge Faded Plot Grid

1853Edge Faded Plot GridGráficosUm cenário de plotagem com regras tracejadas que desaparecem nas bordas, com uma linha de base destacada e uma faixa de luz que as percorre.

Dot matrix status pill

1950Dot matrix status pillMensagens de statusUm botão de pílula cujo lado esquerdo é uma grade de cinco por cinco pontos reproduzindo um padrão de loop curto para cada estado, com a legenda trocando de passo.

Bar wave matrix

2112Bar wave matrixFundosUma grade de barras curtas onde cada barra desliza ao longo de sua própria trilha, e o deslocamento de fase de linha para linha transforma toda a grade em uma onda viajante.

Compass bar grid

2127Compass bar gridAnimaçãoUma grade de barras curtas que giram para apontar para o ponteiro, de modo que o campo pareça uma limalha de ferro encontrando um ímã.

Pulse grid mesh

2210Pulse grid meshFundosUma malha de arame quadrada que se expande em anéis lentos a partir do meio, mais brilhante no centro e desaparece antes de atingir as bordas.

Rubber sheet panel

2218Rubber sheet panelAnimaçãoUm painel que se comporta como uma borracha esticada: o ponteiro o agarra, os pontos vizinhos se arrastam e, ao soltá-lo, ele volta com uma oscilação.

Tile reveal swap

2252Tile reveal swapAnimaçãoDois painéis trocam de lugar, ladrilho por ladrilho, cada ladrilho girando e aumentando à medida que gira, em uma ordem orientada a partir do centro, das bordas ou de uma espiral.

Channel tile row

2313Channel tile rowBotõesUma linha envolvente de blocos de ícones quadrados sob uma pequena legenda, onde cada bloco muda para sua própria cor reservada ao passar o mouse.

Reactive bento panels

2409Reactive bento panelsLayoutUma grade bento de painéis que brilham no ponteiro, inclinam-se em 3D, flutuam em direção ao cursor e explodem em partículas e ondulações ao clicar.

Ripple Origin Grid

2415Ripple Origin GridLayoutUma grade de peças coloridas que se iluminam em uma onda que irradia para fora de uma peça escolhida, cronometrada pela distância daquela peça.

Shared layout card expand

2427Shared layout card expandSobreposiçõesUma grade de cartões onde clicar em um o transforma em um grande painel de detalhes, e mudar diretamente para outro cartão redireciona o mesmo refluxo em vez de fechar e reabrir.

Spoke area chart

2436Spoke area chartGráficosUm gráfico polar onde os raios rotulados carregam uma série como uma forma fechada translúcida sobre uma grade poligonal, com uma leitura que se ajusta ao raio mais próximo.

Vertex Dot Radar

2460Vertex Dot RadarGráficosUm gráfico polar de série única que fixa um ponto sólido em cada canto do eixo para que cada valor medido seja lido como um ponto e não apenas como uma silhueta.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Activity cell heatmap
Uma grade de calendário com pequenos quadrados coloridos que se estende em uma onda diagonal e permite que uma faixa de nível isole uma intensidade de cada vez.
Bar wave matrix
Uma grade de barras curtas onde cada barra desliza ao longo de sua própria trilha, e o deslocamento de fase de linha para linha transforma toda a grade em uma onda viajante.
Blinking grid pattern
Uma grade quadrada fina onde células dispersas desaparecem e desaparecem, cada uma saltando para uma célula nova quando seu piscar termina.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)