Buttons
HTML
<button class="ampstart-btn">
SUBMIT
</button>
<button class="ampstart-btn" disabled>
SUBMIT
</button>
HTML
<button class="ampstart-btn ampstart-btn-secondary">
SUBMIT
</button>
<button class="ampstart-btn ampstart-btn-secondary" disabled>
SUBMIT
</button>
Form Elements
HTML
<!-- Checkbox checked -->
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb3 ">
<input type="checkbox" value="1" name="cb" id="cb1" class="p0 m0 relative" checked="">
<label for="cb1" class="" aria-hidden="true">Chkbox 1</label>
</div>
<!-- Checkbox un-checked -->
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb3 ">
<input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative">
<label for="cb2" class="" aria-hidden="true">Chkbox 2</label>
</div>
<!-- Checkbox Disabled -->
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb3 ">
<input type="checkbox" value="3" name="cb" id="cb3" class="p0 m0 relative" disabled="">
<label for="cb3" class="" aria-hidden="true">Chkbox 3</label>
</div>
HTML
<!--Checked Radio -->
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb3 ">
<input type="radio" value="1" name="rb" id="rb1" class="relative" checked>
<label for="rb1" class="" aria-hidden="true">Radio 1</label>
</div>
<!--Un-checked Radio -->
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb3 ">
<input type="radio" value="2" name="rb" id="rb2" class="relative">
<label for="rb2" class="" aria-hidden="true">Radio 2</label>
</div>
<!--Disabled Radio -->
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb3 ">
<input type="radio" value="3" name="rb" id="rb3" class="relative" disabled>
<label for="rb3" class="" aria-hidden="true">Radio 3</label>
</div>
HTML
<!-- Text Input -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Enter your Name">
<label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Enter your Name
</label>
</div>
<!-- End Input-->
<!-- Text Input with value -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<input type="text" value="John Smith" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Enter your Name">
<label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Enter your Name</label>
</div>
<!-- End Input-->
<!-- Disabled text Input -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="This input is Disabled" disabled="">
<label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
</div>
<!-- End Input-->
<!-- Date Input -->
<div class="ampstart-input inline-block relative m0 p0 mb3">
<input type="date" value="2020-10-10" name="name4" id="ip4" class="block border-none p0 m0" placeholder="Date of Expiry">
<label for="ip4" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Date of Expiry</label>
</div>
<!-- End Input-->
HTML
<!-- Range Input -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<input type="range" value="" name="name11" id="ip11" class="block border-none p0 m0" placeholder="Select a range">
<label for="ip11" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Select a range
</label>
</div>
<!-- End Input-->
<!-- Disabled Range Input -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<input type="range" value="" name="name11" id="ip11a" class="block border-none p0 m0" placeholder="Select a range" disabled>
<label for="ip11a" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Select a range
</label>
</div>
<!-- End Input-->
HTML
<!-- Textarea -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<textarea name="name13" id="ip13" class="block border-none p0 m0" rows="5"></textarea>
<label for="ip13" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Write your story
</label>
</div>
<!-- End Textarea -->
<!-- Disabled Textarea -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<textarea name="name13" id="ip13a" class="block border-none p0 m0" rows="5" disabled=""></textarea>
<label for="ip13a" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
This input is disabled
</label>
</div>
<!-- End Textarea -->
HTML
<!-- Select -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<select name="name12" id="ip12" class="block border-none p0 m0">
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Lemon</option>
<option value="">Grape</option>
</select>
<label for="ip12" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Select a fruit
</label>
</div>
<!-- End Select -->
<!-- Disabled Select -->
<div class="ampstart-input inline-block relative m0 p0 mb3 ">
<select name="name12" id="ip12a" class="block border-none p0 m0" disabled="">
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Lemon</option>
<option value="">Grape</option>
</select>
<label for="ip12a" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Select a fruit
</label>
</div>
<!-- End Select -->
Links & Sharing
HTML
<section class="ampstart-related-article-section p3 mb4 border-top border-bottom">
<h2 class="ampstart-heading ampstart-label m0 mb3">Related article</h2>
<article class="ampstart-related-article">
<amp-img src="../../img/rectangle2.png" width="1280" height="720" layout="responsive" alt="Beautiful Image of a rectangle" class="mb3"></amp-img>
<h3 class="ampstart-heading h4 m0 mb3">Incredible views from space</h3>
<p class="line-height-4 mb3">
Nam semper tristique aliquet. Fusce et mauris elit. Nunc pharetra,
felis pretium semper malesuada, tortor libero tincidunt arcu, sit
amet fringilla magna ante sit amet magna. Praesent sem leo,
fringilla at dolor eu, blandit malesuada dolor.
</p>
<a href="#" class="ampstart-related-article-readmore block text-decoration-none ampstart-label">
Read more
</a>
</article>
</section>
HTML
<section class="ampstart-related-section mb4 px3">
<h2 class="h3 mb1">Recommended for you</h2>
<ul class="ampstart-related-section-items list-reset flex flex-wrap m0">
<li class="col-12 sm-col-4 md-col-4 lg-col-4 pr2 py2">
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle1.png" alt="Beautiful Image of a rectangle" width="233" height="202" layout="responsive" class=""></amp-img>
<figcaption class="h5 mt1 px3">
Imagine: life on the moon
</figcaption>
</figure>
<!-- End Image with Caption -->
</li>
<li class="col-12 sm-col-4 md-col-4 lg-col-4 pr2 py2">
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle2.png" alt="Beautiful Image of a rectangle" width="233" height="202" layout="responsive" class=""></amp-img>
<figcaption class="h5 mt1 px3">
A satellite's view
</figcaption>
</figure>
<!-- End Image with Caption -->
</li>
<li class="col-12 sm-col-4 md-col-4 lg-col-4 pr2 py2">
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle1.png" alt="Beautiful Image of a rectangle" width="233" height="202" layout="responsive" class=""></amp-img>
<figcaption class="h5 mt1 px3">
Out-of-this-world space tech
</figcaption>
</figure>
<!-- End Image with Caption -->
</li>
</ul>
</section>
HTML
<ul class="ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4">
<li class="mr2">
<a href="#" class="inline-block" target="_blank" aria-label="Link to Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.2" viewbox="0 0 53 49">
<title>Twitter</title>
<path d="M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6" class="ampstart-icon ampstart-icon-twitter"></path>
</svg>
</a>
</li>
<li class="mr2">
<a href="#" class="inline-block" target="_blank" aria-label="Link to Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.6" viewbox="0 0 56 55">
<title>Facebook</title>
<path d="M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43" class="ampstart-icon ampstart-icon-fb"></path>
</svg>
</a>
</li>
<li class="mr2">
<a href="#" class="inline-block" target="_blank" aria-label="Link to pin trest">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28.5" viewbox="0 0 43 51">
<title>pinterest</title>
<path d="M-13.6-5c0-1.6.2-3 .8-4.4.5-1.4 1.2-2.6 2.2-3.6.9-1 2-1.9 3.2-2.6 1.2-.8 2.5-1.3 3.9-1.7 1.5-.4 2.9-.5 4.4-.5 2.2 0 4.3.4 6.2 1.4 1.9.9 3.5 2.3 4.7 4.1 1.2 1.9 1.8 3.9 1.8 6.2 0 1.4-.1 2.7-.4 4C13-.8 12.5.5 12 1.7c-.6 1.2-1.3 2.3-2.2 3.2C9 5.8 8 6.6 6.7 7.1c-1.2.6-2.5.9-4 .9-1 0-1.9-.3-2.9-.7-.9-.5-1.6-1.1-2-1.9-.1.5-.3 1.4-.6 2.4-.3 1.1-.4 1.7-.5 2-.1.3-.2.9-.4 1.6-.3.7-.4 1.2-.6 1.5-.1.3-.4.7-.7 1.3-.3.6-.6 1.2-1 1.7-.3.5-.7 1.1-1.3 1.8l-.3.1-.2-.2c-.2-2.2-.3-3.6-.3-4 0-1.3.2-2.8.5-4.4.3-1.7.8-3.7 1.4-6.2.6-2.5 1-3.9 1.1-4.4-.5-.9-.7-2.1-.7-3.6 0-1.2.4-2.3 1.1-3.3.8-1.1 1.7-1.6 2.8-1.6.9 0 1.6.3 2.1.9.4.6.7 1.3.7 2.2 0 .9-.3 2.3-1 4.1C-.7-.9-1 .4-1 1.3c0 .9.3 1.6 1 2.2.6.6 1.4.9 2.3.9.8 0 1.5-.2 2.2-.5.6-.4 1.2-.9 1.6-1.5.5-.6.9-1.3 1.2-2 .4-.8.6-1.5.8-2.4.2-.8.4-1.6.5-2.4.1-.7.1-1.4.1-2.1 0-2.5-.8-4.4-2.3-5.8-1.6-1.4-3.6-2.1-6.1-2.1-2.8 0-5.2 1-7.1 2.8-1.9 1.9-2.9 4.2-2.9 7.1 0 .6.1 1.2.3 1.8.2.6.4 1.1.6 1.4.2.3.4.7.5 1 .2.3.3.5.3.6 0 .4-.1.9-.3 1.6-.2.6-.5 1-.8 1 0 0-.1-.1-.4-.1-.7-.2-1.3-.6-1.9-1.2-.5-.6-1-1.3-1.3-2-.3-.8-.5-1.6-.7-2.4-.2-.7-.2-1.5-.2-2.2z" transform="translate(21.734 23.748)" class="ampstart-icon ampstart-icon-pinterest"></path>
</svg>
</a>
</li>
<li class="mr2">
<a href="#" class="inline-block" target="_blank" aria-label="Link to insta gram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 54 54">
<title>instagram</title>
<path d="M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z" class="ampstart-icon ampstart-icon-instagram"></path>
</svg>
</a>
</li>
<li class="mr2">
<a href="#" class="inline-block" target="_blank" aria-label="Link to Google Plus">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15.5" viewbox="0 0 45 29">
<title>Google Plus</title>
<path d="M45 12.5h-4.1V8.4h-4.1v4.1h-4.1v4h4.1v4.1h4.1v-4.1H45v-4zm-30.7 0v4.9h8.1c-.3 2.1-2.4 6.1-8.1 6.1-4.8 0-8.8-4-8.8-9s4-9 8.8-9c2.8 0 4.7 1.2 5.7 2.2l3.9-3.8C21.4 1.6 18.2.2 14.3.2 6.4.2 0 6.6 0 14.5s6.4 14.3 14.3 14.3c8.3 0 13.8-5.8 13.8-14 0-.9-.1-1.6-.3-2.3H14.3z" class="ampstart-icon ampstart-icon-gplus"></path>
</svg>
</a>
</li>
<li class="mr2">
<a href="#" class="inline-block" target="_blank" aria-label="Link to E mail">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18.4" viewbox="0 0 56 43">
<title>email</title>
<path d="M10.5 6.4C9.1 6.4 8 7.5 8 8.9v21.3c0 1.3 1.1 2.5 2.5 2.5h34.9c1.4 0 2.5-1.2 2.5-2.5V8.9c0-1.4-1.1-2.5-2.5-2.5H10.5zm2.1 2.5h30.7L27.9 22.3 12.6 8.9zm-2.1 1.4l16.6 14.6c.5.4 1.2.4 1.7 0l16.6-14.6v19.9H10.5V10.3z" class="ampstart-icon ampstart-icon-email"></path>
</svg>
</a>
</li>
</ul>
SCRIPT TAG
To use Links & Sharing the following script tags must be included as a direct child of the HEAD tag of your page.
HTML
<div class="ampstart-social-box mb4">
<amp-social-share type="twitter" aria-label="Share this on Twitter"></amp-social-share>
<amp-social-share type="facebook" data-param-text="Hello world" data-param-href="https://example.com/?ref=URL" data-param-app_id="145634995501895" aria-label="Share this on Facebook"></amp-social-share>
<amp-social-share type="gplus" aria-label="Share this on Google Plus"></amp-social-share>
<amp-social-share type="pinterest" aria-label="Share this on pin trest"></amp-social-share>
<amp-social-share type="email" data-param-subject="Hello World" data-param-body="What's up?" aria-label="Share this with E mail"></amp-social-share>
</div>
Lists
HTML
<ol class="m0">
<li>Muddle 6 of the strawberries with the juice of one lemon</li>
<li>Slice the rest of the strawberries in even, 1/4-inch slices</li>
<li>Grate ginger (juice and pulp) into the strawberry-lemon mixture</li>
<li>Combine sparkling water with mixture to taste</li>
</ol>
HTML
<ul class="m0">
<li>2 bunches of strawberries</li>
<li>1 lemon</li>
<li>1 cucumber</li>
<li>Mint leaves</li>
<li>Ginger</li>
</ul>
Media
HTML
<figure class="ampstart-image-fullpage-hero m0 relative mb4">
<amp-img width="404" height="720" layout="responsive" src="../../img/rectangle1.png" media="(max-width: 415px)" alt="Beautiful Image of a rectangle"></amp-img>
<amp-img height="720" layout="fixed-height" src="../../img/rectangle2.png" media="(min-width: 416px)" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="absolute top-0 right-0 bottom-0 left-0">
<header class="p3">
<h1 class="ampstart-fullpage-hero-heading mb3">
<span class="ampstart-fullpage-hero-heading-text">
Life on a space shuttle
</span>
</h1>
<span class="ampstart-image-credit h4">
By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
</span>
</header>
<footer class="absolute left-0 right-0 bottom-0">
<a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
</footer>
</figcaption>
</figure>
HTML
<figure class="ampstart-image-with-heading m0 relative mb4">
<amp-img src="../../img/rectangle2.png" width="1280" height="853" layout="responsive" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="absolute right-0 bottom-0 left-0">
<header class="ampstart-image-heading px2 py2 line-height-4">
<h1>Views from Space</h1>
</header>
</figcaption>
</figure>
HTML
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle2.png" width="1280" height="853" layout="responsive" class="" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="h5 mt1 px3">
Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
<span class="ampstart-image-credit block bold">
Taken by
<a href="#" role="author">J.T. Lee</a>
</span>
</figcaption>
</figure>
SCRIPT TAG
To use Media the following script tags must be included as a direct child of the HEAD tag of your page.
HTML
<amp-carousel width="1280" height="853" layout="responsive" type="slides" class="mb4">
<!-- Start Image with heading -->
<figure class="ampstart-image-with-heading m0 relative mb4">
<amp-img src="../../img/rectangle2.png" width="1280" height="853" layout="responsive" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="absolute right-0 bottom-0 left-0">
<header class="ampstart-image-heading px2 py2 line-height-4"><h3 class="h1">Image 1</h3></header>
</figcaption>
</figure>
<!-- End Image with heading -->
<!-- Start Image with heading -->
<figure class="ampstart-image-with-heading m0 relative mb4">
<amp-img src="../../img/rectangle1.png" width="1280" height="853" layout="responsive" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="absolute right-0 bottom-0 left-0">
<header class="ampstart-image-heading px2 py2 line-height-4"><h3 class="h1">Image 2</h3></header>
</figcaption>
</figure>
<!-- End Image with heading -->
<!-- Start Image with heading -->
<figure class="ampstart-image-with-heading m0 relative mb4">
<amp-img src="../../img/rectangle2.png" width="1280" height="853" layout="responsive" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="absolute right-0 bottom-0 left-0">
<header class="ampstart-image-heading px2 py2 line-height-4"><h3 class="h1">Image 3</h3></header>
</figcaption>
</figure>
<!-- End Image with heading -->
</amp-carousel>
SCRIPT TAG
To use Media the following script tags must be included as a direct child of the HEAD tag of your page.
HTML
<amp-carousel width="1280" height="880" layout="responsive" type="slides" class="mb4">
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle2.png" width="1280" height="753" layout="responsive" class="" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="h5 mt1 px3">
Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
<span class="ampstart-image-credit block bold">
Taken by
<a href="#" role="author">J.T. Lee</a>
</span>
</figcaption>
</figure>
<!-- End Image with Caption -->
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle1.png" width="1280" height="753" layout="responsive" class="" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="h5 mt1 px3">
Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
<span class="ampstart-image-credit block bold">
Taken by
<a href="#" role="author">Mali D.</a>
</span>
</figcaption>
</figure>
<!-- End Image with Caption -->
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="../../img/rectangle2.png" width="1280" height="753" layout="responsive" class="" alt="Beautiful Image of a rectangle"></amp-img>
<figcaption class="h5 mt1 px3">
Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
<span class="ampstart-image-credit block bold">
Taken by
<a href="#" role="author">L. Fischer</a>
</span>
</figcaption>
</figure>
<!-- End Image with Caption -->
</amp-carousel>
HTML
<address class="ampstart-byline clearfix mb4 px3 h5">
<amp-img class="ampstart-byline-photo mr3 left" src="../../img/oval.png" layout="fixed" height="60" width="60"></amp-img>
<a class="ampstart-byline-author block text-decoration-none my1" href="#" role="author">Jacinda B</a>
<time class="ampstart-byline-pubdate block bold my1" datetime="2016-09-18T12:15">Sept 10, 2016 @12:15 pm</time>
</address>
Typography
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML
<h3 class="ampstart-title-lg">Large Title</h3>
<h3 class="ampstart-title-md">Title Text</h3>
<h3 class="ampstart-title-sm">Small Title</h3>
<h3 class="ampstart-subtitle">Subtitle text</h3>
<label class="ampstart-label">Label Text</label>
<h4 class="ampstart-caption">Caption text</h4>
<div class="ampstart-hint">Hint text</div>
<small class="ampstart-small-text">Smaller text for copyrights and disclaimers.</small>
HTML
<blockquote class="ampstart-pullquote" cite="http://example.org">
"Morbi vulputate purus sodales dapibus ultrices.
Donec commodo condimentum enim, eget congue dui dapibus vel.
Pellentesque porttitor sit amet justo eu scelerisque."
</blockquote>
HTML
<p class="ampstart-dropcap">
Donec porta orci eu tortor finibus, id facilisis metus aliquam.
Pellentesque lobortis viverra odio ut eleifend.
Integer elementum finibus magna, consequat fermentum dui ultrices sit amet.
</p>
HTML
<p class="ampstart-initialcap">
Donec porta orci eu tortor finibus, id facilisis metus aliquam.
Pellentesque lobortis viverra odio ut eleifend.
Integer elementum finibus magna, consequat fermentum dui ultrices sit amet.
</p>
HTML
<p class="mb4 px3">
Sed leo sapien, molestie sit amet lorem eu, suscipit imperdiet tortor. Mauris
maximus magna quam, non sodales metus auctor nec. Aenean tristique massa
enim, non dictum mauris eleifend tristique. Proin fermentum nulla a nulla
bibendum ultricies. Nulla pulvinar, risus vel tristique aliquet, elit quam
tincidunt nisi, non blandit leo nulla eu ipsum. Sed porta, felis vitae
elementum pellentesque, mauris felis rhoncus quam, ac suscipit eros justo ac
justo. Proin et elit vitae sem interdum posuere et vitae nibh. Ut sed orci
aliquam, pulvinar felis ac, pretium massa. Nullam porta ipsum non euismod
mollis. Quisque scelerisque nisi quis pharetra blandit.
</p>
<p class="mb4 px3">
Vestibulum eu varius dolor. Praesent sagittis magna sem, non bibendum quam
aliquam et.Sed et tristique mi. Quisque porta lorem et nulla lacinia gravida.
Nullam semper lobortis sem, interdum tempus tellus. Proin accumsan imperdiet
leo at vulputate. Nulla euismod placerat finibus. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>