# h1 Heading

h1 Heading

# h2 Heading with `padding`{class="red--text text--lighten-2 darken-2 teal"} and `margin`{class="blue--text"} {class="pa-2 ma-2 grey white--text" style="border-radius: 10px;"}

h2 Heading with padding and margin

### h3 Heading responsive alignment {class="text-xs-left text-sm-center"}

h3 Heading responsive alignment

Image width 100px

![hunterliu](https://hunterliu-blog.now.sh/_nuxt/img/af664ca.jpg){width="100"}

Highlightjs

Bash

# bash
npm install
npm run dev
npm run storybook

HTML

<div id="app">
  <p>{{ message }}</p>
</div>

Javascript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Iframe

Storybook

<iframe frameborder='no'  scrolling='no' src="https://hunterliu1003.github.io/nuxt-blog-storybook/iframe.html?selectedKind=TheInputTags&selectedStory=TheInputTags&full=0&addons=1&stories=1&panelRight=1&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel"></iframe>

Codepen

@[codepen](https://codepen.io/hunterliu1003/embed/zjBBpK/?height=265&theme-id=0&default-tab=js,result&embed-version=2)

jsfiddle

@[jsfiddle](https://jsfiddle.net/rykeller/y4848ak7/8/embedded/html,css,result/)

Codepen iframe

<iframe height='300' scrolling='no' title='Vuetify Example Pen' src='https://codepen.io/hunterliu1003/embed/zjBBpK/?height=300&theme-id=33425&default-tab=html&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/hunterliu1003/pen/zjBBpK/'>Vuetify Example Pen</a> by Hunter (<a href='https://codepen.io/hunterliu1003'>@hunterliu1003</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>