{% extends "plainui/base.html" %} {% import "plainui/components/title.html" as titleMacro with context%} {% import "plainui/components/logo.html" as logoMacro %} {% import "plainui/components/markdown.html" as markdownMacro %} {% import "plainui/components/event_info.html" as eventInfoMacro with context %} {% import "plainui/components/slider.html" as sliderMacro %} {% import "plainui/components/resourcesbox.html" as resboxMacro %} {% import "plainui/components/tagbox.html" as tagboxMacro %} {% import "plainui/components/listbox.html" as listboxMacro %} {% import "plainui/components/tile_board.html" as tileBoardMacro %} {% import "plainui/components/image.html" as imageMacro %} {% import "plainui/components/form_elements.html" as formElementsMacro %} {% import "plainui/components/three_cards.html" as threeCardsMacro %} {% import "plainui/components/list_events.html.j2" as list_events with context %} {% import "plainui/components/list_assemblies.html" as list_assm with context %} {% import "plainui/components/list_rooms.html.j2" as list_rooms with context %} {% import "plainui/components/function_btns.html" as fbtns with context %} {% import "plainui/components/map.html" as mapMacro %} {% import "plainui/components/alert.html" as alert %} {% block title %}Components Gallery{% endblock %} {% set image_url = "https://picsum.photos/1400/800" %} {% set assembly1 = {"id": "1", "name": "assembly example 1", "slug": "assembly_slug1", "is_official": false,"banner_image": {"url": image_url}, "description": "Lorem Ipsum ..." } %} {% set assembly2 = {"id": "2", "name": "assembly example 2 - official", "slug": "assembly_slug2", "is_official": true, "banner_image": {"url": image_url}, "description": "Lorem Ipsum ..." } %} {% set assemblies = [ assembly1, assembly2, assembly1, assembly2, assembly1, assembly2 ] %} {% set event1 = {"id": "1", "name": "event example 1", "slug": "event_slug1", "banner_image": {"url": image_url}, "schedule_start": time1, "schedule_end": time2, "schedule_duration": duration, "description": "Lorem Ipsum ...", "language": "en", "assembly": assembly1 } %} {% set event2 = {"id": "2", "name": "event example 2", "slug": "event_slug2", "banner_image": {"url": image_url}, "schedule_start": time1, "schedule_end": time2, "schedule_duration": duration, "description": "Lorem Ipsum ...", "language": "de", "assembly": assembly2 } %} {% set events = [ event1, event2, event1, event2 ] %} {% set room1 = {"id": "8387a222-536d-4bb6-b15a-9b3688fda7d9", "name": "room example 1", "slug":"abc", "room_type": "bbb", "capacity": 42, "occupants": 23 } %} {% set room2 = {"id": "8387a222-536d-4bb6-b15a-9b3688fda7a5", "name": "room example 2", "slug":"abcd", "room_type": "workshop", "capacity": 42 } %} {% set rooms = [ room1, room2 ] %} {% block content %}
Apply the class hub-card
to wrap content into a box.
Use hub-row
to start a horizontal columns layout.
The layout is wrapped into rows on small screens.
hub-col-325px
can be applied to get a fixed-width columnhub-col-remaining
can be applied to use the remaining space
Use hub-hlayout
, hub-vlayout
or hub-vlayout-l
for horizontal / vertical layouts with spacing.