{% 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 %}

Components Gallery

Logo
{{ logoMacro.logo("#") }}
Hub layout classes

Apply the class hub-card to wrap content into a box.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.

Use hub-row to start a horizontal columns layout. The layout is wrapped into rows on small screens.

fixed-width column
fills the remaining space

Use hub-hlayout, hub-vlayout or hub-vlayout-l for horizontal / vertical layouts with spacing.

hlayout-1
hlayout-2
hlayout-3
vlayout-1
vlayout-2
vlayout-3
vlayout-l-1
vlayout-l-2
vlayout-l-3
heroimage
{{ imageMacro.image(image=image_url, alt="Alt Text", title="Title Text") }}
title
{{ titleMacro.title(title="Fantastic Headline", fav_id="12345", fav_type="assembly", fav_is=true, sch_id="12345", sch_is=true, stream_url="url", report_url="url") }}
Markdown
{{ markdownMacro.markdown(markdown="Hello World") }}
Markdown Plain
{{ markdownMacro.markdown_plain(markdown="Hello World") }}
Event Info
{{ eventInfoMacro.eventInfo(event=event1)}}
Slider
{{ sliderMacro.slider(items=['eins', 'zwei', '3', '4']) }}
Livestream
{{ list_events.livestream({ "room": "My Room", "stream_link": null, "voc_stream": null, "current_event": event1, "next_event": event2 }) }}
Resources box
{{ resboxMacro.resourcesbox("Resources title") }}
Tags
{{ tagboxMacro.tag("Default") }} {{ tagboxMacro.tag("style='outline'", style="outline") }} {{ tagboxMacro.tag("Icon", icon="rocket-fill") }} {{ tagboxMacro.tag("Link", link="https://example.com/") }} {{ tagboxMacro.secondary(".secondary()") }} {{ tagboxMacro.tag("style='secondary-outline'", style="secondary-outline") }} {{ tagboxMacro.tag("style='disabled'", style="disabled") }} {{ tagboxMacro.tag("style='danger'", style="danger") }} {{ tagboxMacro.tag("style='outline-danger'", style="outline-danger") }} {{ tagboxMacro.tag("style='clear'", style="clear") }} {{ tagboxMacro.user("Peter") }} {{ tagboxMacro.tag( "long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_long_tag_", icon="fire" ) }}
Tagbox
{{ tagboxMacro.tagbox(tags=[ { "slug": "start" }, { "slug": "end" } ]) }}
Listbox
{{listboxMacro.listbox(items=[{ "name": "Item 1", "link": "#", }, { "name": "Item 2", "link": "#" }]) }}
Assembly List
{{ list_assm.list(assemblies, ['2']) }}
Assembly Grid
{{ list_assm.grid(assemblies, ['2']) }}
Assembly Slider
{{ list_assm.slider(assemblies, ['2']) }}
Events List
{{ list_events.list(events, ['1'] ) }}
Events List Tiles
{{ list_events.grid(events, ['1'] ) }}
Events List Slider
{{ list_events.slider(events, ['1'] ) }}
Rooms List
{{ list_rooms.list(rooms) }}
Tile Board
{{tileBoardMacro.tile({ "id": 1, "title": "Item 1", "timestamp": "2020-12-18 17:39:39.916726+00:00", "text": "Hello World", "owner_name": "Mia", "owner_link": "#", "is_editable": true, "edit_link": "#", "delete_form_id": "form-1", "report_link": "#", "detail_link": "#" }) }}
Three Cards
{{threeCardsMacro.three_cards(cards=[{ "title": "Item 1", "text": "Lorem Ipsum", "link": { "url": "#", "text": "Link Text", "type": "secondary" } }, { "title": "Item 1", "text": "Lorem Ipsum" }, { "title": "Item 1", "text": "Lorem Ipsum", "link": { "url": "#", "text": "Link Text", "type": "assembly" } } ]) }}
Valid Form
{{ formElementsMacro.text(form_valid, 'text') }} {{ formElementsMacro.password(form_valid, 'password') }} {{ formElementsMacro.checkbox(form_valid, 'checkbox') }} {{ formElementsMacro.textarea(form_valid, 'textarea') }} {{ formElementsMacro.errors(form_valid) }}
Invalid Form
{{ formElementsMacro.text(form_invalid, 'text') }} {{ formElementsMacro.password(form_invalid, 'password') }} {{ formElementsMacro.checkbox(form_invalid, 'checkbox') }} {{ formElementsMacro.textarea(form_invalid, 'textarea') }} {{ formElementsMacro.errors(form_invalid) }}
Functional Buttons
{{ fbtns.share("plainui:index") }} {{ fbtns.fav(fav_id="1", fav_type="assembly", fav_is=true) }} {{ fbtns.schedule(sch_id="2", sch_is=false) }} {{ fbtns.stream(stream_url="URL") }} {{ fbtns.report(report_url="URL") }}
Valid Form rendered as form
{{ formElementsMacro.render_form_fields(form_valid)}} {{ formElementsMacro.errors(form_valid) }}
Invalid Form rendered as form
{{ formElementsMacro.render_form_fields(form_invalid)}} {{ formElementsMacro.errors(form_invalid) }}
Map
{{ mapMacro.map(conf, poi=demo_map_startpos) }}
Alerts
{% call alert.info(class="mb-2") %} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. {% endcall %} {% call alert.danger(class="mb-2") %} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. {% endcall %} {% call alert.success(class="mb-2") %} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. {% endcall %} {% call alert.warning(class="mb-2") %} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. {% endcall %}
{% endblock %}