Skip to main content

Tall Article 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()