Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save justinatack/0141c4c98f1f16a544a9c433873a19f5 to your computer and use it in GitHub Desktop.
Save justinatack/0141c4c98f1f16a544a9c433873a19f5 to your computer and use it in GitHub Desktop.
Quasar Framework Newsletter Subscription Form Component Example
<template>
<q-page class="bg-grey-3 window-height window-width row justify-center items-center">
<div class="column">
<div class="row justify-center items-center">
<h5 class="text-h5 text-grey-7">Newsletter Subscription</h5>
</div>
<div class="row">
<q-card square bordered class="q-pa-lg shadow-3" style="width:360px;">
<q-card-section>
<q-form class="q-gutter-lg">
<q-input square clearable v-model="email" type="text" label="Name" />
<q-input square clearable v-model="email" type="email" label="Email" />
</q-form>
</q-card-section>
<q-card-actions class="q-px-md q-py-lg">
<q-btn unelevated color="primary" size="lg" class="full-width" label="Subscribe" />
</q-card-actions>
</q-card>
</div>
</div>
</q-page>
</template>
<script>
export default {
name: 'NewsletterSubscription',
data () {
return {
name: '',
email: ''
}
}
}
</script>
<style>
</style>
@justinatack
Copy link
Author

alt text
Requires Quasar Framework v1.0.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment