---
layout: default
title: pages.graphics.title
description: pages.graphics.description
---
{% include hero/graphics.html %}

{% assign logos =  site.data.graphics-collection | where:"type","logo" %}
{% assign merchants =  site.data.graphics-collection | where:"type","merchants" %}
{% assign buttons =  site.data.graphics-collection | where:"type","buttons" %}

<div class="page">
	<section class="section">
		<div class="section__content">
			<h2>{% t pages.graphics.logos-header %}</h2>
			<div class="row">
				{% for graphic in logos %}
					{% include graphics-tile.html %}
				{% endfor %}
			</div>
		</div>
	</section>

	<section class="section">
		<div class="section__content">
			<h2>{% t pages.graphics.merchants-header %}</h2>
			<div class="row">
				{% for graphic in merchants %}
					{% include graphics-tile.html %}
				{% endfor %}
			</div>
		</div>
	</section>

	<section class="section">
		<div class="section__content">
			<h2>{% t pages.graphics.dontaion-header %}</h2>
			<div class="row">
				{% for graphic in buttons %}
					{% include graphics-tile.html %}
				{% endfor %}
			</div>
		</div>
	</section>

	<section class="section">
		<div class="section__content">
			<a href="/assets/Dash_Vector_Graphics_Collection.zip"  class="btn-blue-solid" download>
			{% t pages.graphics.download-link %}
			</a>
			<hr>
		</div>

	</section>

	<section class="section">
		<div class="section__content">
			<h2 class="section__title">{% t pages.graphics.indent-header %}</h2>

			<div class="row bottom-space">

				<div class="col-md-6">
					<h2>{% t pages.graphics.color-header %}</h2>
					<p>{% t pages.graphics.color-text %}</p>
				</div>

				<div class="col-md-6">
					<div class="row">
						<div class="col-xs-6">
							<div class="color-box color-box_blue"></div>
							<div class="color-article">
								<p>RGB: 30,113,184</p>
								<p>CMYK: 85,50,0,0</p>
								<p>Hex: #1d71b8</p>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="color-box color-box_gray"></div>
							<div class="color-article">
								<p>RGB: 227,227,227</p>
								<p>CMYK: 13,9,11,0</p>
								<p>Hex: #e3e3e3</p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-6">
							<div class="color-box color-box_black"></div>
							<div class="color-article">
								<p>RGB: 0,0,0</p>
								<p>CMYK: 91,79,62,97</p>
								<p>Hex: #000000</p>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="color-box color-box_white"></div>
							<div class="color-article">
								<p>RGB: 255,255,255</p>
								<p>CMYK: 0,0,0,0</p>
								<p>Hex: #ffffff</p>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="row">
				<div class="col-md-6">
					<h2>{% t pages.graphics.typography-header %}</h2>
					<p>{% t pages.graphics.typography-text %}</p>
				</div>
				<div class="col-md-6">
					<div class="row">
						<div class="col-xs-6">
							<p>Gunship Bold Italic</p>
							<span class="text-word-wrap graphic-exmaple-brand">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890?!%</span>
						</div>
						<div class="col-xs-6">
							<p>Montserrat Light</p>
							<span class="text-word-wrap graphic-exmaple-light">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890?!%</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>


</div>