Block colors

Preset color combinations, use for larger blocks of content.

Default

Bacon ipsum dolor amet beef cupim brisket pork turducken.

Primary

Bacon ipsum dolor amet beef cupim brisket pork turducken.

Secondary

Bacon ipsum dolor amet beef cupim brisket pork turducken.

<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>