Skip to main content

Tall Aricle Preview

Create a tall article preview card if you intend to show a little preview and allow user to click through to more content (specify 'name' attr).

from h2o_wave import main, app, Q, ui

content = '''### Sub Header
Nunc scelerisque tincidunt elit. Vestibulum non mi ipsum. Cras pretium suscipit tellus sit ametsa aliquet.'''

@app('/demo')async def serve(q: Q):    if q.args.tall_article:        q.page['example'] = ui.form_card(box='1 1 4 6', items=[            ui.button(name='back', label='Go back', primary=True),        ])    else:        q.page['example'] = ui.tall_article_preview_card(            box='1 1 4 6',            title='Tall article preview',            subtitle='Click the card',            value='$19',            name='tall_article',            image='https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260', # noqa            content=content,            items=[                ui.buttons(items=[                    ui.button(name='like', label='Like'),                    ui.button(name='comment', label='Comment'),                    ui.button(name='share', label='Share'),                ]),            ]        )
    await q.page.save()