what's the role of 'meta' in a page?

[zillionare]

Have seen this code snippets around a lot:
`@app('/demo')
async def serve(q: Q):
q.page['meta'] = ui.meta_card(box='', layouts=[ui.layout(breakpoint='xs', zones=[
ui.zone(name='main', size='100vh', zones=[
ui.zone(name='header', size='80px'),
ui.zone(name='body', size='1'),
ui.zone(name='footer', size='60px'),
]),
])])

q.page['header'] = ui.header_card(box='header', title='Header', subtitle='Subtitle')
q.page['body'] = ui.form_card(box='body', items=[ui.text(content='I am body!')])
q.page['footer'] = ui.footer_card(box='footer', caption='Footer caption')
await q.page.save()

`

Checking meta_card's doc, it says "This card is invisible. It is used to control attributes of the active page."

I understand we may need this card to keep 'meta' info for the page, like title, icon or even theme. However, why we need define layout for this card since it's invisible? How this card will interact with user and other parts of the site/page?

[mtanco]

The layout in the meta card is not for the card itself (you'll notice that only meta_card has a layout attribute), it is for the entire page. By creating zones in a layout, you can then reference those zones in the box parameter of other cards in your app. That is, the layout is part of the entire app's meta information.

You can learn more about layouts here: https://wave.h2o.ai/docs/layout/