Card Layout

[karndeb]

Hi team,
Great work so far. I am a beginner in frontend and I am having some trouble centering a card in a page and dividing the card into two equal sections where one section on the left has some user inputs and the section on the right has some media. Something like a login form with username, password, sign in button on the left, and an image on the right. Could someone help me with this?
Also is there a layout tutorial I could refer to for this? Thanks

[rodja]

Currently you need to use Tailwind/Quasar or CSS to do such layouting. We are in discussion to provide a simpler way in #117. Have a look at https://quasar.dev/style/positioning for example. Here a short example:

with ui.card().classes('absolute-center'):
    with ui.row():
        with ui.column():
            ui.input('Username')
            ui.input('Password', password=True)
            ui.button('Login')
        with ui.column():
            ui.image('https://picsum.photos/200/300').classes('w-32')