Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Quasar Framework Login Form Card Component Example
<q-page class="bg-light-green window-height window-width row justify-center items-center">
<div class="column">
<div class="row">
<h5 class="text-h5 text-white q-my-md">Company & Co</h5>
<div class="row">
<q-card square bordered class="q-pa-lg shadow-1">
<q-form class="q-gutter-md">
<q-input square filled clearable v-model="email" type="email" label="email" />
<q-input square filled clearable v-model="password" type="password" label="password" />
<q-card-actions class="q-px-md">
<q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Login" />
<q-card-section class="text-center q-pa-none">
<p class="text-grey-6">Not reigistered? Created an Account</p>
export default {
name: 'Login',
data () {
return {
email: '',
password: ''
.q-card {
width: 360px;

This comment has been minimized.

Copy link
Owner Author

@justinatack justinatack commented Apr 17, 2019

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