Amperage theme kitchen sink

by Asur Bernardo

This is a demo page for all the components in the Amperage theme. This posts is updated on every version release of Amperage. Last updated on January 16th, 2020.

Titles

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs and inline modifications

Ulysses, Ulysses — Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses — Fighting evil and tyranny, with all his power, and with all of his might. Ulysses — no-one else can do the things you do. Ulysses — like a bolt of thunder from the blue. Ulysses — always fighting all the evil forces bringing peace and justice to all.

Code highlights

How to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{< highlight html "linenos=table" >}}

<link rel="manifest" href="https://example.com/manifest.json">
<link rel="icon" type="image/png"
    sizes="32x32" href="https://example.com/icons/favicon-32x32.png">
<link rel="icon" type="image/png"
    sizes="16x16" href="https://example.com/icons/favicon-16x16.png">
<link rel="apple-touch-icon"
    sizes="180x180" href="https://example.com/icons/apple-touch-icon.png">

{{< /highlight >}}

Result:

1
2
3
4
5
6
7
<link rel="manifest" href="https://example.com/manifest.json">
<link rel="icon" type="image/png"
    sizes="32x32" href="https://example.com/icons/favicon-32x32.png">
<link rel="icon" type="image/png"
    sizes="16x16" href="https://example.com/icons/favicon-16x16.png">
<link rel="apple-touch-icon"
    sizes="180x180" href="https://example.com/icons/apple-touch-icon.png">

Tables

How to:

1
2
3
4
5
| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

Result:

TablesAreCool
col 1 isleft-aligned$1600
col 2 iscentered$12
col 3 isright-aligned$1

Ads

How to:

1
2
3
4
5
{{< amp-adsense
    width="320"
    height="320"
    layout="fixed"
    slot="123456789" >}}

Result:

#ad

No ad for you!

Images

How to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{< amp-image
    alt="Amperage image demo"
    src="/images/your-image.jpg"
    width="1280"
    height="720"
    layout="responsive" >}}

// OR

![Amperage image demo](/images/your-image.jpg)

Result:

Images with caption

How to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{< amp-image
    alt="Amperage image demo"
    caption="Welcome to the Amperage theme kitchen sink!"
    src="/images/your-image.jpg"
    width="1280"
    height="720"
    layout="responsive" >}}

// OR

![Amperage image demo](/images/your-image.jpg "Welcome to the Amperage theme kitchen sink!")

Result:

Welcome to the Amperage theme kitchen sink!

GIFs

How to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{< amp-gif
    alt="Amperage GIF demo"
    src="/images/your-animation.gif"
    width="1367"
    height="1112"
    layout="responsive" >}}

// OR

![Amperage GIF demo](/images/your-animation.gif)

Result:

Videos

How to:

1
2
3
4
5
6
{{< amp-video
    alt="Amperage video demo"
    src="/videos/your-video.m4v"
    width="1280"
    height="576"
    layout="responsive" >}}

Result:

Post-its

How to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{< post-it title="Warning! 🚨" >}}
Hong Kong Phooey, number one super guy. **Hong Kong Phooey**, quicker than the human eye. He’s got style, *a groovy style*, and a car that just won’t stop.
{{< / post-it >}}

{{< post-it type="success" title="Success! 🎉" >}}
Mutley, you snickering, *floppy eared hound*. When courage is needed, you’re never around. Those medals you wear on your moth-eaten chest should be there _for bungling_ at which you are best.
{{< / post-it >}}

{{< post-it type="danger" title="Danger! 💀" >}}
Top Cat! The most effectual **Top Cat**! Who’s intellectual close friends get to call him T.C., providing it’s with dignity. Top Cat! The indisputable leader of the gang.
{{< / post-it >}}

{{< post-it type="info" title="Info! 💬" >}}
80 days around the world, we’ll find a pot of gold just sitting where the rainbow’s ending. Time — we’ll fight against the time, and we’ll fly on the white wings of the wind.
{{< / post-it >}}

Result:

Warning! 🚨
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He’s got style, a groovy style, and a car that just won’t stop.
Success! 🎉
Mutley, you snickering, floppy eared hound. When courage is needed, you’re never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best.
Danger! 💀
Top Cat! The most effectual Top Cat! Who’s intellectual close friends get to call him T.C., providing it’s with dignity. Top Cat! The indisputable leader of the gang.
Info! 💬
80 days around the world, we’ll find a pot of gold just sitting where the rainbow’s ending. Time — we’ll fight against the time, and we’ll fly on the white wings of the wind.

Products

How to:

1
2
3
4
5
6
{{< product
    title="Yellow rubber duck 🦆"
    description="A programmer's best friend when you don't have anyone to talk to."
    image="https://example.com/your-image.jpg"
    cta="Find out price!"
    link="https://example.com/your-product" >}}

Result:

Yellow rubber duck!

A programmer's best friend when you don't have anyone to talk to. He will always be there! 🦆

Find out price!

Iframes

How to:

1
2
3
4
5
6
{{< amp-iframe
    sandbox="allow-scripts allow-same-origin"
    src="https://example.com/embed/rihCLlGLlTYm4"
    width="480"
    height="321"
    layout="responsive" >}}

Result:

Asur Bernardo

Back end developer with no aesthetic sense. I love programming, tinkering and technology in general. Always trying to learn new things.

If you liked it share and comment!

Load more