Use spotlights to feature a bit of content on your page. The most comprehensive version includes both a link to a specific story (or event, program, etc.) as well as a link to the overall category or collection of stories (or events, programs, etc.). You can pare this down to feature just a single link or to work as a caption for a photo. All three versions are included below.
Note: choose any of the brand colors to customize a spotlight’s appearance.
Full Version
HTML
<div class="spotlight bowman">
<a href="Individual URL">
<img src="" alt="image alt text">
<div class="headline">
<strong>Short Headline</strong>
<br>Person or Subject
</div>
</a>
<div class="more">
<a href="Collection URL">
Name of <strong>collection</strong>
</a>
</div>
</div>
Single-link Version
Start with the full version and simply delete the headline div. Then point both a tags to the same URL.
HTML
<div class="spotlight regalia">
<a href="Single URL">
<img src="" alt="image alt text">
</a>
<div class="more">
<a href="Single URL">
Name of <strong>featured content</strong>
</a>
</div>
</div>
Photo Caption
To add a caption to an image, start with the full version and simply delete the more div and the remaining a tag. More details can be found with the images documentation.
Note: this version will also work with any of the brand colors, though we suggest using gray.
HTML
<div class="spotlight gray">
<img src="" alt="image alt text">
<div class="headline">
<strong>A Caption</strong>
<br>For Your Photos
</div>
</div>
See examples of spotlights at Style Guide/Spotlights.
