Style Guide | Celestron

Heading 1

<p class="heading h1">Heading 1</p>

Heading 2

<p class="heading h2">Heading 2</p>

Heading General

<p class="heading">Heading General</p>

<button class="btn primary">Button</button> <button class="btn primary alt">Button</button> <button class="btn primary small">Button</button> <button class="btn hollow">Button</button>

<nav class="breadcrumb container" role="navigation" aria-label="breadcrumbs"> <a href="/" title="Home">Home</a> <span aria-hidden="true"> / </span> <span>Style Guide</span> </nav>

Learn More

Add to Cart

Learn More

<div class="grid-wrapper"> <div class="container"> <div class="grid-item mix sale-false price-2000" data-product-id="" data-index="" data-price="" data-name=""> <a href="" class="grid-item-image grid-item-image-not-list-view" title=""> <img src="//www.celestron.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_181x216.gif" alt="" alt="" /> </a> <div class="collection-product-meta-container"> <a href="" class="grid-item-image" title=""> <img src="//www.celestron.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_181x216.gif" alt="" /> </a> <div class="collection-list-prod-title-price-container"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body"> <p class="grid-regular-price"></p> </div> <div class="grid-body show-geo"> </div> </div> </div> <div class="grid-item-desc js-hide-geo hide-geo learn"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body"> <p class="grid-regular-price"></p> </div> <a href="" class="btn hollow coll-learn-more-button">Learn More</a> </div> <div class="grid-item-desc js-show-geo"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body cgl-product-info" style="text-align:center"> </div> <a href="" class="btn hollow js-show-geo coll-learn-more-button">Learn More</a> </div> </div> <div class="grid-item mix sale-false price-2000" data-product-id="" data-index="" data-price="" data-name=""> <a href="" class="grid-item-image grid-item-image-not-list-view" title=""> <img src="//www.celestron.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_181x216.gif" alt="" alt="" /> </a> <div class="collection-product-meta-container"> <a href="" class="grid-item-image" title=""> <img src="//www.celestron.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_181x216.gif" alt="" /> </a> <div class="collection-list-prod-title-price-container"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body"> <p class="grid-regular-price"></p> </div> <div class="grid-body show-geo"> </div> </div> </div> <div class="grid-item-desc js-hide-geo hide-geo"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body"> <p class="grid-regular-price"></p> </div> <a href="" class="btn primary js-add-cart-new grid-add-to-cart-btn" data-variant-id="" data-variant-qty="1" data-sku="" data-availability="Y">Add to Cart</a> </div> <div class="grid-item-desc js-show-geo"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body cgl-product-info" style="text-align:center"> </div> <a href="" class="btn hollow js-show-geo coll-learn-more-button">Learn More</a> </div> </div> </div> </div>

Add to Cart

Learn More

Add to Cart

Learn More

Add to Cart

Learn More

Add to Cart

Learn More

Add to Cart

Learn More

<div class="grid-wrapper grey"> <div class="container"> <div class="grid-item mix sale-false price-2000" data-product-id="" data-index="" data-price="" data-name=""> <a href="" class="grid-item-image grid-item-image-not-list-view" title=""> <img src="//www.celestron.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_181x216.gif" alt="" alt="" /> </a> <div class="collection-product-meta-container"> <a href="" class="grid-item-image" title=""> <img src="//www.celestron.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_181x216.gif" alt="" /> </a> <div class="collection-list-prod-title-price-container"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body"> <p class="grid-regular-price"></p> </div> <div class="grid-body show-geo"> </div> </div> </div> <div class="grid-item-desc js-hide-geo hide-geo"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body"> <p class="grid-regular-price"></p> </div> <a href="" class="btn primary js-add-cart-new grid-add-to-cart-btn" data-variant-id="" data-variant-qty="1" data-sku="" data-availability="Y">Add to Cart</a> </div> <div class="grid-item-desc js-show-geo"> <a href="" class="grid-title"></a> <div class='opinew-stars-plugin-product-list'> <div class="opinew-stars-plugin-link opinew-list-stars-disable" onclick="window.location.href = 'https://www.celestron.com'" style=" text-decoration: none; "> <span class="opinew-star-plugin-inside"> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> <i class="stars-color opw-noci opw-noci-star-empty" aria-hidden="true"></i> </span> <span class="opinew-no-reviews-stars-plugin" onMouseOver="this.style.color='#c45500'" onMouseOut="this.style.color='inherit'"><b> </b></span> </div> </div> <div class="grid-body cgl-product-info" style="text-align:center"> </div> <a href="" class="btn hollow js-show-geo coll-learn-more-button">Learn More</a> </div> </div> </div> </div>

PREPARE FOR 2017’S TOTAL SOLAR ECLIPSE

with ISO solar safe products

GET PREPARED HERE

<div class="hero js-hero-slider" data-autoplay="4000"> <a href="/products/example-nexstar-evolution-8-hd-with-starsense" class="hero-slide" style="background-color: rgb(0, 0, 0);"> <div class="container"> <div class="hero-image"> <img src="//cdn.shopify.com/s/files/1/1935/4371/files/example_2-mob_320x.jpg?v=1495050466" srcset="//cdn.shopify.com/s/files/1/1935/4371/files/example_2-mob_320x.jpg?v=1495050466 320w, //cdn.shopify.com/s/files/1/1935/4371/files/example_2-mob_640x.jpg?v=1495050466 640w, //cdn.shopify.com/s/files/1/1935/4371/files/example_2_960x.jpg?v=1495048580 960w, //cdn.shopify.com/s/files/1/1935/4371/files/example_2_1200x.jpg?v=1495048580 1200w"> </div> </div> </a> <a href="/pages/style-guide" class="hero-slide to-left" style="background-color: rgb(15, 46, 66);"> <div class="container"> <div class="hero-image"> <img src="//cdn.shopify.com/s/files/1/1935/4371/files/example_1_320x.jpg?v=1495048517" srcset="//cdn.shopify.com/s/files/1/1935/4371/files/example_1_320x.jpg?v=1495048517 320w, //cdn.shopify.com/s/files/1/1935/4371/files/example_1_640x.jpg?v=1495048517 640w, //cdn.shopify.com/s/files/1/1935/4371/files/example_1_960x.jpg?v=1495048517 960w, //cdn.shopify.com/s/files/1/1935/4371/files/example_1_1200x.jpg?v=1495048517 1200w"> </div> <div class="hero-content" style="color:#FFFFFF"> <h2 class="heading h1">PREPARE FOR 2017’S TOTAL SOLAR ECLIPSE</h2> <p class="heading hero-copy">with ISO solar safe products</p> <span class="btn primary block js-link" data-href="/pages/style-guide-another-link">GET PREPARED HERE</span> </div> </div> </a> </div>

Astronomy

Discover your place in the universe with superior optics and more from the world’s #1 telescope maker.

View All Astronomy

View all Astronomy Products

<div class="three-cat"> <div class="container"> <div class="cat-single"> <div class="cat-head"> <h2 class="heading h2">Astronomy</h2> <p class="cat-copy">Discover your place in the universe with superior optics and more from the world’s #1 telescope maker.</p> <a href="/collections" class="btn alt text-link small">View All Astronomy</a> </div> <img src="//cdn.shopify.com/s/files/1/1935/4371/files/example_block_295x.png?v=1495063657" class="cat-image"> <ul class="cat-list"> <li class="cat-list-item"> <a href="/">Telescopes</a> </li> <li class="cat-list-item"> <a href="/">Optical Tubes</a> </li> <li class="cat-list-item"> <a href="/">Mounts & Tripods</a> </li> </ul> <a href="/products/example-nexstar-evolution-8-hd-with-starsense" class="btn block primary alt">View all Astronomy Products</a> </div> </div> </div>

Description

Optical Tube Info
Optical Design	Rowe-Ackerman Schmidt
Aperture (mm)	279 mm (11 in)
Focal Length	620 mm
Focal Ratio	2.22
Backfocus from front lens assembly	72.8 mm
Backfocus from included camera adapters	55 mm
Central obstruction diameter	Not Included
Resolution (Rayleigh)	0.5 arc seconds

<table class="table-open"> <thead> <th colspan="2">Optical Tube Info</th> </thead> <tbody> <tr> <td>Optical Design</td> <td>Rowe-Ackerman Schmidt</td> </tr> <tr> <td>Aperture (mm)</td> <td>279 mm (11 in)</td> </tr> </tbody> </table>

Technology

Nulla facilisi. Vivamus scelerisque, mi et pretium pharetra, mauris felis venenatis est, nec tincidunt metus enim porttitor massa. Morbi cursus orci sit amet velit egestas varius. Curabitur eleifend auctor condimentum. Sed ornare odio non augue blandit elementum. Nullam congue enim enim, in tristique ante faucibus a.

Specifications

Quisque et purus ipsum. Maecenas tristique luctus erat, eu pulvinar nunc facilisis eu. In pellentesque mi id enim cursus eleifend. Proin nibh tortor, semper ut lacinia eget, fermentum quis arcu. Nullam nec convallis tortor. Sed lacinia, est vitae egestas convallis, magna erat pharetra felis, ac pellentesque lectus lorem ut lorem. Nulla faucibus nulla ex, sit amet suscipit justo tincidunt eu. Nam eget enim ut risus lacinia efficitur. Suspendisse vitae ligula eleifend, placerat enim id, mollis mi. Aliquam imperdiet diam sit amet libero porta tempus. Curabitur quis facilisis massa. Maecenas accumsan auctor libero, at venenatis risus porta nec.

Videos

Cras suscipit nunc id est condimentum eleifend. Aliquam non molestie lectus, sit amet tempus ipsum. Vivamus fermentum nulla eget ligula iaculis condimentum. Aenean erat lacus, fringilla a tempus sit amet, euismod eu est.

Reviews

Mauris mattis, dui sit amet suscipit congue, nunc velit congue sem, eu hendrerit lorem mi eu massa. Praesent eget urna eu dolor aliquam semper. Donec suscipit, enim a semper faucibus, ligula justo vehicula lectus, eget pretium turpis nisl et mi. Vestibulum diam lacus, feugiat at semper eget, maximus et risus. Sed at lobortis nulla. In semper ac ligula quis lobortis. Pellentesque placerat turpis a lacus vehicula cursus. Mauris vitae turpis ut mauris commodo congue et sed erat. In tincidunt dictum velit, in mattis nibh finibus sit amet. Pellentesque fermentum fringilla dui, vel condimentum nunc viverra ac. Aliquam eu feugiat sem, id faucibus purus.

Accessories

Phasellus laoreet nisi ac lacus pellentesque, quis malesuada orci blandit. Phasellus vulputate tincidunt quam, facilisis efficitur magna vestibulum efficitur. Praesent tincidunt fringilla enim, sit amet iaculis massa commodo at. Ut sed interdum mi. Morbi ac metus ac tortor maximus fermentum nec eget leo. In justo est, accumsan in hendrerit eu, pretium eget est. Suspendisse lacinia risus id mattis pellentesque. Duis hendrerit egestas bibendum. Praesent lacinia posuere lacinia. Etiam sit amet lectus laoreet, faucibus leo ac, condimentum velit.

Support & Downloads

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum auctor felis ut cursus. Maecenas volutpat, diam dictum blandit vestibulum, lectus diam vestibulum nisi, ut suscipit mauris urna id justo. Aenean dictum justo mauris. Sed nec vulputate ipsum. Nam mattis sem non sollicitudin pretium. Pellentesque tempor lacinia ultrices. Donec sollicitudin feugiat augue molestie congue. In lacinia bibendum nisl, at convallis diam gravida at.

<div class="tab-wrapper"> <ul class="container tab-list js-tab-list"> <li class="tab js-tab">Specifications</li> </ul> </div> <div class="tab-content-wrapper container"> <div class="accordion"> <p class="accordion-head tab js-accordion">Technology</p> <div class="tab-content js-accordion-content"> <p> Nulla facilisi. </p> </div> </div> <div class="accordion"> <p class="accordion-head tab js-accordion">Specifications</p> <div class="tab-content js-accordion-content"> <p> Quisque et purus ipsum. </p> </div> </div> </div>