WAI Website Assets

Teaser with BG Image 

<section class="teaser featured grid-three-five" style="background-image: url(../../assets/images/teaser-image@1x.jpg); background-image: -webkit-image-set(url(../../assets/images/teaser-image@1x.jpg) 1x, url(../../assets/images/teaser-image@2x.jpg) 2x)">
    <a class="teaser-c stealthy-link col1" href="#">
        <header class="teaser-h featured">
            <p class="subtitle">Featured Resource</p>
            <h2 class="title"><svg aria-hidden="true" class="icon-checkmark teaser-h-icon"><use xlink:href="../../assets/images/icons.svg#icon-checkmark"></use></svg> checkmarkEasy Checks
            </h2>
        </header>
        <p>
            Is accessibility addressed in even the most basic way on your site?
        </p>
        <div>
            <span class="button">Read More</span>
        </div>
    </a>
</section>
 
<section class="teaser featured grid-three-five" style="background-image: url({{ image | path }}); background-image: -webkit-image-set(url({{ image1x | path }}) 1x, url({{ image2x | path }}) 2x)">
  <a class="teaser-c stealthy-link col1" href="#">
    <header class="teaser-h featured">
      <p class="subtitle">{{subtitle}}</p>
      <h2 class="title">
        {%- render '@icons', name=icon, class="teaser-h-icon" -%} {{title}}
      </h2>
    </header>
    <p>
      {{description}}
    </p>
    <div>
      {%render "@button", name="fake", type="fake", label="Read More" %}
    </div>
  </a>
</section>
 
{
  "title": "Easy Checks",
  "subtitle": "Featured Resource",
  "description": "Is accessibility addressed in even the most basic way on your site?",
  "icon": "checkmark",
  "image": "/assets/images/teaser-image@1x.jpg",
  "image1x": "/assets/images/teaser-image@1x.jpg",
  "image2x": "/assets/images/teaser-image@2x.jpg"
}

There are no notes for this item.