Block colors

Preset color combinations, use for larger blocks of content.

<div class="example-grid" id="blocks">
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block env-block--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Default</h2>
            <p>
               Bacon <a href="#block" class="env-link">ipsum</a> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#block" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block-primary env-block-primary--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Primary</h2>
            <p>
               Bacon <a href="#block" class="env-link">ipsum</a> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#block" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block-secondary env-block-secondary--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Secondary</h2>
            <p>
               Bacon <span href="#block" class="env-link">ipsum</span> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#block" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
</div>

Envision documentation