Filestack Marketing Site - Style Guide

Text styles

<!-- Eyebrow -->
<p class="uppercase text-sm text-center mb-2"></p>

<!-- Headings -->
<h2 class="text-2xl text-gray-800 font-bold text-center mb-4 mx-auto" style="max-width: 750px"></h2>
<h2 class="text-2xl text-gray-800 font-bold mb-4"></h2>
<h3 class="text-xl text-gray-800 font-bold mb-2"></h3>

<!-- Text link -->
<a class="text-blue-900 hover:text-blue-500 underline" href=""></a>

Block sections

<!-- Hero Section -->
<section class="bg-gradient-to-b from-violet-900 to-gray-900 sm:bg-gradient-to-r">
  <div class="py-8 sm:py-16 bg-custom-triangle-br bg-no-repeat bg-right-bottom">
    <div class="container mx-auto px-4">
      <div class="grid sm:grid-cols-2 gap-16 items-center">
      </div>
    </div>
  </div>
</section>

<!-- Section -->
<section class="py-8 sm:py-16"></section>

<!-- Subtle gray section with triangles -->
<section class="py-8 sm:pt-16 bg-violet-50 bg-custom-triangle-tr bg-no-repeat bg-right-top"></section>

<!-- Grid for cards -->
<ul class="grid md:grid-cols-2 gap-8">
  <li class="mb-8 p-8 sm:p-12 bg-white shadow-lg rounded-lg">
    <h4 class="mb-4 text-2xl font-normal uppercase"></h4>
    <p></p>
  </li>
</ul>

<!-- Flex for bands (content | media) -->
<div class="md:flex md:space-x-24 items-center">
  <div class="md:w-2/5 mb-8 md:mb-0">
    <h2 class="text-2xl font-bold mb-4"></h2>
    <p class="mb-4"></p>
    <a class="py-3 px-4 border hover:bg-violet-700 border-violet-700 font-bold text-violet-700 hover:text-white rounded-lg inline-block" href="#">Documentation</a>
  </div>
  <div class="flex-grow flex flex-wrap justify-center items-center">
  </div>
</div>

<!-- Inverted flex for bands (media | content) -->
<div class="md:flex items-center">
  <div class="md:w-2/5 md:ml-24 mb-8 md:mb-0 order-2">
    <h2 class="text-2xl font-bold mb-4"></h2>
    <p class="mb-4"></p>
    <a class="py-3 px-4 border hover:bg-violet-700 border-violet-700 font-bold text-violet-700 hover:text-white rounded-lg inline-block" href="#">Documentation</a>
  </div>
  <div class="flex-grow flex justify-center items-center order-1"></div>
</div>

<!-- Icon placeholder -->
<div class="w-16 h-16 mb-4 flex justify-center align-middle rounded-full bg-violet-50">IMG</div>

<!-- Ghost button on the white background -->
<a class="py-3 px-4 border hover:bg-violet-700 border-violet-700 font-bold text-violet-700 hover:text-white rounded-lg inline-block" href="#">Documentation</a>

<!-- Ghost button on the dark background -->
<a class="py-3 px-4 border hover:bg-white border-white font-bold text-white hover:text-gray-900 rounded-lg inline-block" href="#">Documentation</a>

Shortcodes