background: $color-y700
Resultado: background: #F6A706
margin: spacing(1) spacing(4)
Resultado: margin: 8px 32px
<h3 class="heading-{X} [heading-desktop-{X}]">Text</h3>
<h2 class="heading-3">Text</h2>
<h2 class="heading-4 heading-desktop-2">Text</h2>
<h1 class="heading-1">Text</h1>
<h2 class="sub-heading-mini">Text</h2>
<h3 class="sub-heading">Text</h3>
<p class="text-{size} [text-dekstop-{size}]">Text</p>
<p class="text-tiny">Text</p>
<p class="text-tiny text-desktop-normal">Text</p>
<div class="text-normal">
<p>Text</p>
<p>More text</p>
</div>
Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-huge" ou class"text-desktop-huge"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-big" ou class"text-desktop-big"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-normal" ou class"text-desktop-normal"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-medium" ou class"text-desktop-medium"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-small" ou class"text-desktop-small"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-tiny" ou class"text-desktop-tiny"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-minuscule" ou class"text-desktop-minuscule"Texto complementar para o banner. Um extenso painel de imagens que exibe aos hóspedes
class="text-minimum" ou class"text-desktop-minimum"<div class="input">
<label>Field name</label>
<input type="text" />
</div>
<div class="input">
<label>Field name</label>
<input type="tel" />
</div>
<div class="input disabled">
<label>Field name</label>
<input type="text" disabled />
</div>
<div class="input error">
<label>Field name</label>
<input type="text" />
<span class="message message-error">Digite um e-mail válido</span>
</div>
<div class="input success">
<label>Field name</label>
<input type="text" />
<span class="message message-success">Ótimo! Sua senha é forte!</span>
</div>
<div class="input icons">
[svg]
<label>Field name</label>
<input type="text" placeholder="Descreva este íconee" />
</div>
<div class="select">
<select>
<option>Option 1</option>
<option>Option 2</option>
...
</select>
</div>
<span class="banner-icon">
<i class="icon">[svg]</i>
<b class="text-medium">16 Tonaladas de Lixo Reciclado</b>
</span>
<span class="banner-icon text-center">
<i class="icon">[svg]</i>
<h3 class="heading heading-5">Pantanal</h3>
<p class="text-big">16 Tonaladas de Lixo Reciclado</p>
</span>
<span class="card-icon">
[svg]
<p class="text-tiny">Ar-condicionado</p>
</span>
<div class="simple-icon-title-and-text">
[svg]
<div class="text text-medium">
<b>Capacidade</b>
<p>12 Pessoas</p>
</div>
</div>
<div class="simple-icon-title-and-text">
<img src="..." />
<div class="text text-medium">
<b>SUÍTES</b>
<p>Quarto e Sala de Estar</p>
</div>
</div>
<div class="simple-icon-title-and-text title-left">
<div class="icon">[svg]</div>
<div class="text text-normal">
<h6 class="heading heading-6">Verão</h6>
<p>Varia entre 25°C e 40°C</p>
</div>
</div>
<div class="partner">
<div class="logo">[svg/img]</div>
<div class="description text">
<p>O Refúgio Ecológico Caiman é um destino membro da Fundação Zeitz</p>
<a href="#">www.url.com</a>
</div>
</div>
Associação global de hotéis, parques e restaurantes que, além dos serviços de luxo. Tem como valores fundamentais uma forte crença na ação como agente de mudança através de experiências impactantes ecológicas, sócio-econômicas ou de sustentabilidade cultural.
www.beeplushive.comO Refúgio Ecológico Caiman é um destino membro da Fundação Zeitz, uma organização que promove o desenvolvimento sustentável, baseado no equilíbrio entre a conservação da natureza, a comunidade, a cultura e o comércio.
www.zeitzfoundation.org<div class="cycle cycle--js">
<div class="circle">
<div class="content text-small">Aumenta a produtividade e gera menos impacto</div>
</div>
<div class="nav">
<div class="item active" data-text="Aumenta a produtividade e gera menos impacto">
<div class="number">1</div>
<p class="text-big">Pecuária</p>
</div>
<div class="item" data-text="Valoriza o Pantanal e seus atrativos, além de incentivar a preservação...">
<div class="number">2</div>
<p class="text-big">Ecoturismo</p>
</div>
...
</div>
</div>
<div class="simple-banner simple-banner--right">
<figure>
<img src="..." />
</figure>
<div class="wrap-content">
<div class="content">
<h1 class="heading heading-4 heading-desktop-2">Texto</h1>
<p class="text text-huge">Um extenso painel de imagens que</p>
</div>
</div>
</div>
<div class="simple-banner simple-banner--left">
<figure>
<img src="..." />
</figure>
<div class="wrap-content">
<div class="content">
<h1 class="heading heading-4 heading-desktop-2">Texto</h1>
<p class="text text-huge">Um extenso painel de imagens que</p>
</div>
</div>
</div>
<div class="destaque">
<div class="wrap-content container">
<h2 class="heading heading-6">Por abrigar grande quantidade de lagoas...</h2>
</div>
</div>
<div class="destaque call-to-action">
<div class="wrap-content container">
<h2 class="heading heading-6">Por abrigar grande quantidade de lagoas...</h2>
<a href="#">
<button class="button button-cta">Veja mais</button>
</a>
</div>
</div>
<div class="destaque-float">
<div class="wrap-content container">
<div class="logo">
[svg]
</div>
<div class="content">
<h3 class="heading heading-7">Complexo Sede</h3>
<h3 class="heading-text heading-6">Sinta de perto a natureza pantaneira.</h3>
</div>
<a href="#">
<button class="button button-cta">Veja mais</button>
</a>
</div>
</div>
<div class="video">
<div class="iframe-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/julAhYgKrqg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="video video-youtube-custom-play video-youtube-custom-play--js">
<div class="iframe-wrap">
<iframe width="560" height="315" allowscriptaccess="always" src="https://www.youtube.com/embed/julAhYgKrqg?autoplay=0&rel=0&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div class="custom-overlay">
<button class="button-icon-play">[svg]</button>
</div>
</div>
</div>
<div class="video video-full">
<div class="iframe-wrap">
<iframe src="https://www.youtube.com/embed/julAhYgKrqg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="check-group">
<div class="item text text-big">
<span class="check"></span> Privacidade total
</div>
<div class="item text text-big">
<span class="check"></span> Horários mais flexíveis
</div>
...
</div>
<div class="audio audio-player--js">
<div class="audio-player">
<button class="button-icon-play play">[svg play]</button>
<button class="button-icon-pause pause">[svg pause]</button>
<p class="text">Horários mais flexíveis</p>
</div>
<audio controls>
<source src="..." type="..."></source>
</audio>
</div>
Sinta toda a magia da revoada, ouvindo o som dessa atração da natureza
<div class="audio audio-tiny audio-player--js">
<div class="audio-player">
<button class="button-icon-play play">[svg play]</button>
<button class="button-icon-pause pause">[svg pause]</button>
<p class="text">Horários mais flexíveis</p>
</div>
<audio controls>
<source src="..." type="..."></source>
</audio>
</div>
Para entrar no clima pantaneiro com muita música
<div class="mosaic-wrapper [container]">
<div class="simple-mosaic">
<div class="item">
<a href="..." />
<img src="..." />
</a>
</div>
<div class="item">
<a href="..." />
<img src="..." />
</a>
</div>
...
</div>
<p class="caption">Legenda</p>
</div>
<div class="mosaic-wrapper [container]">
<div class="simple-mosaic-model-1">
<div class="item">
<a href="..." />
<img src="..." />
</a>
</div>
...
</div>
</div>
<div class="mosaic-wrapper [container]">
<div class="simple-mosaic-model-2">
<div class="item">
<a href="..." />
<img src="..." />
</a>
</div>
...
</div>
</div>
<div class="mosaic-wrapper [container]">
<div class="simple-mosaic-model-3">
<div class="item">
<a href="..." />
<img src="..." />
</a>
</div>
...
</div>
</div>
O bioma permanece alagado durante a maior parte do ano. Os rios transbordam e alagam até dois terços da planície, consequência das chuvas torrenciais nas cabeceiras do rio Paraguai.
Quando as chuvas cessam, os rios e lagoas retornam a seus limites naturais. Os mamíferos, que haviam se dispersado com a cheia, voltam a ocupar a planície.
Social
Código