Skip to main content Skip to navigation
View Navigation Comet

Thumbnails

Display thumbnail images at a controlled aspect ratio with flexible options for images of varying aspect ratios.

The thumbnail component absolutely positions a background image within a two-level container. This containment establishes a standard 16x9 aspect ratio, along with an image for print-only scenario and labels read by a screen reader.

Standard

Without a Container
Concept Concept
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-thumbnail">
    <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/concept-2.jpeg')">
        <img src="/images/components/thumbnail/concept-2.jpeg" alt="Concept" class="comet-thumbnail__print-only-image">
        <span class="comet-screenreader-only">Concept</span>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.thumbnail(
							alt= "Concept",
							img_url= "/images/components/thumbnail/concept-2.jpeg"
						) %}{% endcall %}
                
Macro params reference
In Container Controlling Width
Concept Concept
Concept Concept
Concept Concept
Concept Concept
Concept Concept
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/concept-1.jpeg')">
            <img src="/images/components/thumbnail/concept-1.jpeg" alt="Concept" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Concept</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/concept-2.jpeg')">
            <img src="/images/components/thumbnail/concept-2.jpeg" alt="Concept" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Concept</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/video-1.jpg')">
            <img src="/images/components/thumbnail/video-1.jpg" alt="Concept" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Concept</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/video-2.jpg')">
            <img src="/images/components/thumbnail/video-2.jpg" alt="Concept" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Concept</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/video-3.jpg')">
            <img src="/images/components/thumbnail/video-3.jpg" alt="Concept" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Concept</span>
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
					{% call comet.thumbnail(
						alt= "Concept",
						img_url= "/images/components/thumbnail/concept-1.jpeg"
					) %}{% endcall %}
				</div>
				<div class="comet-doc__thumbnail-container">
					{% call comet.thumbnail(
						alt= "Concept",
						img_url= "/images/components/thumbnail/concept-2.jpeg"
					) %}{% endcall %}
				</div>
				<div class="comet-doc__thumbnail-container">
					{% call comet.thumbnail(
						alt= "Concept",
						img_url= "/images/components/thumbnail/video-1.jpg"
					) %}{% endcall %}
				</div>
				<div class="comet-doc__thumbnail-container">
					{% call comet.thumbnail(
						alt= "Concept",
						img_url= "/images/components/thumbnail/video-2.jpg"
					) %}{% endcall %}
				</div>
				<div class="comet-doc__thumbnail-container">
					{% call comet.thumbnail(
						alt= "Concept",
						img_url= "/images/components/thumbnail/video-3.jpg"
					) %}{% endcall %}
				</div>
                
Macro params reference

Square

Display large thumbnails in a square aspect ratio for distinctive emphasis on a photograph. This display is useful in a grid setting limited to 3 to 5 cards, such as a grid of STEM projects.

Squared
Concept Concept
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--squared">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/concept-1.jpeg')">
            <img src="/images/components/thumbnail/concept-1.jpeg" alt="Concept" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Concept</span>
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
			        {% call comet.thumbnail(
			            alt= "Concept",
			            class= "comet-thumbnail--squared",
			            img_url= "/images/components/thumbnail/concept-1.jpeg"
			        ) %}{% endcall %}
			    </div>
                
Macro params reference
  • Do Image

    use square thumbnails for photographs with a centrally-located focal point or lacking a focal point

  • Do Image

    display square thumbnails for photographs that risk cropping a person unpredictably

  • Do Image

    use a square thumbnail for images of more extreme portrait or landscape aspect ratios, which can result in a loss of context or meaning

Fixed Width

Fix thumbnail width when pairing a thumbnail with an object to its right, such as in a Media Object UI pattern. Use either the --fixed (160px wide) or --fixed-s (100px wide) modifier classes.

Fixed
Concept Concept
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-thumbnail comet-thumbnail--fixed">
    <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/concept-1.jpeg')">
        <img src="/images/components/thumbnail/concept-1.jpeg" alt="Concept" class="comet-thumbnail__print-only-image">
        <span class="comet-screenreader-only">Concept</span>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.thumbnail(
			        alt= "Concept",
			        class= "comet-thumbnail--fixed",
			        img_url= "/images/components/thumbnail/concept-1.jpeg"
			    ) %}{% endcall %}
                
Macro params reference
Fixed, Small
Concept Concept
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-thumbnail comet-thumbnail--fixed-s">
    <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/concept-1.jpeg')">
        <img src="/images/components/thumbnail/concept-1.jpeg" alt="Concept" class="comet-thumbnail__print-only-image">
        <span class="comet-screenreader-only">Concept</span>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.thumbnail(
			        alt= "Concept",
			        class= "comet-thumbnail--fixed-s",
			        img_url= "/images/components/thumbnail/concept-1.jpeg"
			    ) %}{% endcall %}
                
Macro params reference

Contained

Contain the entire thumbnail in 16x9 letterbox in cases where image aspect ratio varies significantly, such as search results, using the --contain modifier class.

Bill Clinton Bill Clinton
George Bush George Bush
Enrollment Enrollment
Eternal Flame Eternal Flame
Palace Palace
Reagan Reagan
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--contain">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/search-clinton.jpg')">
            <img src="/images/components/thumbnail/search-clinton.jpg" alt="Bill Clinton" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Bill Clinton</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--contain">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/search-bush.jpg')">
            <img src="/images/components/thumbnail/search-bush.jpg" alt="George Bush" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">George Bush</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--contain">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/search-enrollment.jpg')">
            <img src="/images/components/thumbnail/search-enrollment.jpg" alt="Enrollment" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Enrollment</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--contain">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/search-eternal-flame.jpg')">
            <img src="/images/components/thumbnail/search-eternal-flame.jpg" alt="Eternal Flame" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Eternal Flame</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--contain">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/search-palace.jpg')">
            <img src="/images/components/thumbnail/search-palace.jpg" alt="Palace" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Palace</span>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--contain">
        <div class="comet-thumbnail__inner" style="background-image: url('/images/components/thumbnail/search-Reagan.jpg')">
            <img src="/images/components/thumbnail/search-Reagan.jpg" alt="Reagan" class="comet-thumbnail__print-only-image">
            <span class="comet-screenreader-only">Reagan</span>
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        class= "comet-thumbnail--contain",
        alt= "Bill Clinton",
        img_url= "/images/components/thumbnail/search-clinton.jpg"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        class= "comet-thumbnail--contain",
        alt= "George Bush",
        img_url= "/images/components/thumbnail/search-bush.jpg"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        class= "comet-thumbnail--contain",
        alt= "Enrollment",
        img_url= "/images/components/thumbnail/search-enrollment.jpg"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        class= "comet-thumbnail--contain",
        alt= "Eternal Flame",
        img_url= "/images/components/thumbnail/search-eternal-flame.jpg"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        class= "comet-thumbnail--contain",
        alt= "Palace",
        img_url= "/images/components/thumbnail/search-palace.jpg"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        class= "comet-thumbnail--contain",
        alt= "Reagan",
        img_url= "/images/components/thumbnail/search-Reagan.jpg"
    ) %}{% endcall %}
</div>
                
Macro params reference
  • Do Image

    alter the letterbox’s matte color from what’s defined in the component.

No Image Icon Alternative

When an image is unavailable as a thumbnail, display an icon centered upon the product’s theme color.

Assets, No Image
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--no-image">
        <div class="comet-thumbnail__inner">
            <svg class="comet-thumbnail__icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#asset-project"></use>
            </svg>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--no-image">
        <div class="comet-thumbnail__inner">
            <svg class="comet-thumbnail__icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#asset-audio-cd"></use>
            </svg>
        </div>
    </div>
</div>
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--no-image">
        <div class="comet-thumbnail__inner">
            <svg class="comet-thumbnail__icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#asset-book"></use>
            </svg>
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        asset_type="project"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        asset_type="audio-cd"
    ) %}{% endcall %}
</div>
<div class="comet-doc__thumbnail-container">
    {% call comet.thumbnail(
        asset_type="book"
    ) %}{% endcall %}
</div>
                
Macro params reference

Responsive Sizing

To increase icon size in wider viewports, apply the --responsive-icons modifier class.

Image, No Icon Specified

In the absence of an image and a specified icon, display the asset-document icon.

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
    <div class="comet-thumbnail comet-thumbnail--no-image">
        <div class="comet-thumbnail__inner">
            <svg class="comet-thumbnail__icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#asset-document"></use>
            </svg>
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-doc__thumbnail-container">
					        {% call comet.thumbnail() %}{% endcall %}
					    </div>
                
Macro params reference

Guidelines

Editorial

  • When possible, source thumbnail images suitable for display in a 16x9 setting. When you lack control to source predictably cropped images, use the --contain thumbnail alternative.
  • Orient thumbnail focal points towards the central area – or at most, “on the thirds” – to ensure composition displays properly in a 16x9 aspect ratio.

Class Reference

Class Applies to Outcome

.comet-thumbnail--contain

.comet-thumbnail

Contains entire thumbnail image inside the 16x9 block, cropping nothing and introducing a dark matte background color.

.comet-thumbnail--squared

.comet-thumbnail

Alters thumbnail aspect ratio from 16x9 to 1x1.

.comet-thumbnail--responsive-icons

.comet-thumbnail

Enlarges icon size in wide conditions when a thumbnail image is unavailable.

.comet-thumbnail--fixed

.comet-thumbnail

Displays the thumbnail at a fixed width (160px) while sustaining default aspect ratio and cropping appropriately.

.comet-thumbnail--fixed-s

.comet-thumbnail

Displays the thumbnail at a fixed width (100px) while sustaining default aspect ratio and cropping appropriately.

Macro Reference

Parameter Values Description

class

text

Style modifiers (see Class Reference, above) and custom classes.

img_url

path

URL path to image location

icon_path

path

URL path to icon SVG file other than Comet’s.

asset_type

icon name, document (default)

Icon presented when an image is unavailable.

background

cover (default), contain

Display pattern used for background image.

alt

text

Image description used for screenreader and image alt tag.

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1