UI Components

Customize your page with pre-built, reusable components. Copy and paste whatever you need into any AMP Start template

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="">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="">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="">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="">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="">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="">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">
    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">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">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">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">
    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">
    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">
    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">
    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">
    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">
    Select a fruit
  </label>
</div>
<!-- End Select -->

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)"></amp-img>
  <amp-img height="720" layout="fixed-height" src="../../img/rectangle2.png" media="(min-width: 416px)"></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"></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=""></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.

              
<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

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"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0">
      <header class="ampstart-image-heading px2 py2 line-height-4"><h1>Image 1</h1></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"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0">
      <header class="ampstart-image-heading px2 py2 line-height-4"><h1>Image 2</h1></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"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0">
      <header class="ampstart-image-heading px2 py2 line-height-4"><h1>Image 3</h1></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.

              
<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

HTML

<amp-carousel width="1280" height="867" 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=""></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=""></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=""></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

<p class="h1">Text Size 1</p>
<p class="h2">Text Size 2</p>
<p class="h3">Text Size 3</p>
<p class="h4">Text Size 4</p>
<p class="h5">Text Size 5</p>
<p class="h6">Text Size 6</p>
<label class="caps">All caps text</label>
<div class="ampstart-subtitle">Subtitle text</div>
<small>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="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>