Spotlights

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>
Rendered HTML
image alt text
Short Headline
Person or Subject
Name of collection

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>
Rendered HTML
image alt text
Name of featured content

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>
Rendered HTML
image alt text
A Caption
For Your Photos