Components

Imagem de fundo

Buttons

Default

Filled

						
<button class="bt-polimat bt-filled">Default Filled</button>
<button class="bt-polimat bt-filled bt-rounded">Default Rounded</button>
<button class="bt-polimat disabled" disabled>Default Disabled</button>
<button class="bt-polimat">Default</button>

<!-- Filled-->

<button class="bt-polimat bt-danger">Danger</button>
<button class="bt-polimat bt-success">Success</button>
<button class="bt-polimat bt-warning">Warning</button>
<button class="bt-polimat bt-info">Info</button>	
						
					

Outline

						
<!-- Outline -->

<button class="bt-polimat bt-out-danger"> Danger </button>
<button class="bt-polimat bt-out-info"> Info </button>
<button class="bt-polimat bt-out-success"> Success </button>
<button class="bt-polimat bt-out-warning"> Warning </button>	
						
					

Forms

Documentação

Date Picker Input

Date Picker Inline

to

Input text / email / tel

Input out - text / email / tel

Textarea

Textarea out

Input search

Input search out

								<!-- Important Class -->
<form class="form-polimat"> </form>

<!-- Input -->

<div class="form-group">
	<div class="input">
		<input type="text" class="form-control" placeholder="Aqui vai meu texto">
	</div>
</div>

<!-- Input Out -->

<div class="form-group">
	<div class="input-out">
		<input type="text" class="form-control" placeholder="Aqui vai meu texto">
	</div>
</div>

<!-- Textarea -->

<div class="form-group">
	<div class="textarea">
		<textarea rows="10"></textarea>
	</div>
</div>

<!-- Textarea out -->

<div class="form-group">
	<div class="textarea-out">
		<textarea rows="10"></textarea>
	</div>
</div>

<!-- Input Search -->

<div class="form-group">
	<div class="search">
		<input type="search" class="form-control" placeholder="Aqui vai meu texto">
		<button type="submit">
			<i class="fas fa-search"></i>
		</button>
	</div>
</div>

<!-- Input Search Out -->

<div class="form-group">
	<div class="search-out">
		<input type="search" class="form-control" placeholder="Aqui vai meu texto">
		<button type="submit">
			<i class="fas fa-search"></i>
		</button>
	</div>
</div>	
								
							

Input checkbox

Input checkbox disabled

								
<!-- Input Checkbox -->

<div class="form-group">
	<div class="checkbox">
		<input type="checkbox" id="input_name" class="form-control" name="check">
		<label for="input_name">
			<span>Algo sobre isso</span>
		</label>
	</div>
</div>

<!-- Input Checkbox Out -->

<div class="form-group">
	<div class="checkbox">
		<input type="checkbox" disabled="disabled" checked 
		id="input_name_disabled" class="form-control" name="check">
		<label for="input_name_disabled">
			<span>Algo sobre isso</span>
		</label>
	</div>
</div>	
								
							

Input select

Input select out

Input select button

Input select out button

								
<!-- Input select -->

<div class="form-group">
	<div class="select">
		<select name="select" id="select" class="select-comp">
			<option value="" disabled selected > Selecione uma opção</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>		
		</select>
		<i class="fas fa-caret-down"></i>
	</div>
</div>

<!-- Input select out -->

<div class="form-group">
	<div class="select-out">
		<select name="select" id="select" class="select-comp">
			<option value="" disabled selected > Selecione uma opção</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>		
		</select>
		<i class="fas fa-caret-down"></i>
	</div>
</div>

<!-- Input select button -->

<div class="form-group">
	<div class="select-button">
		<div class="group-button">
			<select name="select" id="select" class="select-comp-bt">
				<option value="" disabled selected > Selecione uma opção</option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>		
			</select>
			<i class="fas fa-caret-down"></i>
		</div>
		<button class="bt-polimat bt-filled bt-rounded" type="submit"> Enviar </button>
	</div>
</div>

<!-- Input select button out -->

<div class="form-group">
	<div class="select-button-out">
		<div class="group-button">
			<select name="select" id="select" class="select-comp-bt">
				<option value="" disabled selected > Selecione uma opção</option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>		
			</select>
			<i class="fas fa-caret-down"></i>
		</div>
		<button class="bt-polimat bt-filled bt-rounded" type="submit"> Enviar </button>
	</div>
</div>	
								
							

Input file

Selecione um arquivo

Input file out

Selecione um arquivo

								
<!-- Input file -->

<div class="form-group">
	<div class="file">
		<p class="file-return"> Selecione um arquivo </p>
		<div class="button">
			<input type="file" id="file_input" class="input-file-comp">
			<label for="file_input">
				Selecionar
			</label>
		</div>
	</div>
</div>

<!-- Input file out -->

<div class="form-group">
	<div class="file-out">
		<p class="file-return"> Selecione um arquivo </p>
		<div class="button">
			<input type="file" id="file_input" class="input-file-comp">
			<label for="file_input">
				Selecionar
			</label>
		</div>
	</div>
</div>	
								
							

Card Blog

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quos voluptas autem consequatur, unde sit debitis. Enim amet saepe tempore a voluptatem ullam magni, cupiditate, mollitia ipsum, similique id distinctio!

					
<article class="card-poli-blog">
	<div class="row no-gutters">
		<div class="col-lg-7">
			<figure>
				<a href="#">
					<img src=".../img" alt="">
					<span class="preview">
						<span>Ver mais</span>
					</span>
				</a>
			</figure>
		</div>
		<div class="col-lg-5">
			<div class="box-body">
				<time datetime="2018-05-21">20 Nov. 2018</time>
				<div class="title-posts">
					<a href="#">
						<h3 class="title-card"> Example title post here</h3>
					</a>
				</div>
				<div class="excerpt-post">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
					Maiores quos voluptas autem consequatur, unde sit debitis. 
					Enim amet saepe tempore a voluptatem ullam magni, cupiditate, 
					mollitia ipsum, similique id distinctio!</p>
				</div>
				<div class="footer-card">
					<div class="author">
						<div class="thumb">
							<img src=".../img" alt="">
						</div>
						<p>Policlínica Granato</p>
					</div>
					<div class="comments">
						<i class="far fa-comment"></i>
						<p class="total-coments">20</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</article>	
					
				

Card Local

Unidade

Lorem ipsum dolor.

Rua Major Ávila, 195
Tijuca - RJ
CEP: 20511-140
Unidade

Lorem ipsum dolor.

Rua Major Ávila, 195
Tijuca - RJ
CEP: 20511-140
					
<article class="card-poli-local">
	<div class="box-body">
		<figure>
			<img src=".../tj_01.png" alt="">
		</figure>
		<span>Unidade</span>
		<h3 class="title-local">Lorem ipsum dolor.</h3>
		<address class="local-address .excerpt-post">
			Rua Major Ávila, 195<br>
			Tijuca - RJ<br>
			CEP: 20511-140
		</address>
		<div class="footer-card">
			<ul>
				<li>
					<a href="" class="bt-polimat bt-filled bt-rounded"> Saiba mais</a>
				</li>
			</ul>
		</div>
	</div>
</article>	
					
				

Card Carrousel

					
<div class="carrousel">
	<div class="controls">
		<a href="" class="bt-polimat">Visualizar tudo</a>
		<ul>
			<li><span class="bt-polimat btn-slide prev disabled" disabled >
			<i class="fas fa-angle-left"></i></span></li>
			<li><span class="bt-polimat btn-slide next">
			<i class="fas fa-angle-right"></i></span></li>
		</ul>
	</div>
	<div class="body-carrousel">	
		<article class="card-poli-slide">
			<a href="#">
				<div class="box-body">
					<figure>
						<i class="fas fa-stethoscope"></i>
					</figure>
					<h3 class="title-card">Lorem ipsum dolor.</h3>
					<p class="excerpt-post">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Saepe laborum obcaecati dolorem.
					</p>
				</div>
			</a>
		</article>
		<article class="card-poli-slide">
			<a href="#">
				<div class="box-body">
					<figure>
						<i class="fas fa-stethoscope"></i>
					</figure>
					<h3 class="title-card">Lorem ipsum dolor.</h3>
					<p class="excerpt-post">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Saepe laborum obcaecati dolorem.
					</p>
				</div>
			</a>
		</article>
		<article class="card-poli-slide">
			<a href="#">
				<div class="box-body">
					<figure>
						<i class="fas fa-stethoscope"></i>
					</figure>
					<h3 class="title-card">Lorem ipsum dolor.</h3>
					<p class="excerpt-post">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Saepe laborum obcaecati dolorem.
					</p>
				</div>
			</a>
		</article>
		<article class="card-poli-slide">
			<a href="#">
				<div class="box-body">
					<figure>
						<i class="fas fa-stethoscope"></i>
					</figure>
					<h3 class="title-card">Lorem ipsum dolor.</h3>
					<p class="excerpt-post">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Saepe laborum obcaecati dolorem.
					</p>
				</div>
			</a>
		</article>
		<article class="card-poli-slide">
			<a href="#">
				<div class="box-body">
					<figure>
						<i class="fas fa-stethoscope"></i>
					</figure>
					<h3 class="title-card">Lorem ipsum dolor.</h3>
					<p class="excerpt-post">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Saepe laborum obcaecati dolorem.
					</p>
				</div>
			</a>
		</article>
		<article class="card-poli-slide">
			<a href="#">
				<div class="box-body">
					<figure>
						<i class="fas fa-stethoscope"></i>
					</figure>
					<h3 class="title-card">Lorem ipsum dolor.</h3>
					<p class="excerpt-post">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Saepe laborum obcaecati dolorem.
					</p>
				</div>
			</a>
		</article>
	</div>
</div>	
					
				

Card article carrousel midia

					<article class="card-poli-slide midia">
	<a href="<?php echo $servico->the_url; ?>">
		<div class="box-body">
			<figure>
				<img src="<?php bloginfo('template_url') ?>/img/foq.png" alt="">
				<span class="preview">
					<span><i class="far fa-plus"></i></span>
				</span>
			</figure>
			<div class="info-post">
				<time class="date-post datetime="2019-05-22">22.05.2019</time>
				<span class="category">Pediatria</span>
				<h3 class="title-card">Você sabia que a saúde da mãe pode afetar a do filho?</h3>
			</div>
		</div>
	</a>
</article>