{% extends "layouts/app.twig" %} {% import 'macros/base.twig' as m %} {% import 'macros/form.twig' as f %} {% block title %}{{ __('Design') }}{% endblock %} {% set colors=['success', 'info', 'warning', 'danger'] %} {% set types=[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' ] %} {% set types_buttons=['link']|merge(types) %} {% set shortsum='Lorem ipsum dolor…' %} {% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %} {% set linksum='Lorem ipsum! Dolor link amet, consectetur adipisici elit!' %} {% block content %}

{{ block('title') }} {{ themes[themeId]['name'] }}

Elements small {{ m.icon('link') }}

Headings small

H4 small

H5 small
H6 small

Lists

This page should be used when creating and testing new designs to find usability and/or design issues. {{ lipsum|replace({'…': '.'}) }}

  • Unordered
  • List
  • Items
  1. Ordered
  2. List
  3. Items

{{ linksum|raw }} {{ lipsum }}

Themes

Tables {{ m.icon('link') }}

Header 1 Header 2 Header 3
Table content {{ lipsum }} {{ m.icon('check-lg') }}
Another content Lorem ipsum {{ m.icon('x-lg') }}

Navigation Tabs

Navigation Pills

Texts {{ m.icon('link') }}

{{ linksum|raw }}
{{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}

{% for color in types %}

{{ color|capitalize }}: {{ linksum|raw }}

{% endfor %}

Badges {{ m.icon('link') }}

{% for type in types %} {{ type|capitalize }} {% endfor %}

Buttons {{ m.icon('link') }}

{% for type in types_buttons %} {{ f.button(type|capitalize, {'btn_type': type, 'name': 'button-' ~ type}) }} {% endfor %}

Alerts {{ m.icon('link') }}

{% for color in colors %}

{{ color|capitalize }}

{{ m.alert(linksum, color, true) }}
{% endfor %}

Cards {{ m.icon('link') }}

{% for type in types %}

{{ type|capitalize }}

{{ shortsum }}

Some link

Footer
{% endfor %}

Modal {{ m.icon('link') }}

Title

{{ lipsum }}

Forms {{ m.icon('link') }}

Text
f.input(id, label, opt) {{ f.input('form-input-text', 'Text field', { 'value': 'Value', }) }} {{ f.input('form-input-text-label-icons', 'Text field with required and info icon', { 'value': 'Value', 'required_icon': true, 'info': 'Very important field info!', }) }} {{ f.input('form-input-text-hidden-label', 'Hidden label', { 'value': 'Hidden label', 'hide_label': true, }) }} {{ f.input('form-input-text-disabled', 'Disabled', { 'disabled': true, 'value': 'Value', }) }} {{ f.input('form-input-text-readonly', null, { 'type': 'Readonly', 'readonly': true, 'value': 'w/o label', }) }}
Password
f.password(id, label, opt) {{ f.input('form-input-password', 'Password', { 'type': 'password', 'value': 'Value', }) }}
Number
f.number(id, label, opt) {{ f.number('form-input-number', 'Number field', { 'type': 'number', 'value': 42, }) }} {{ f.number('form-input-number-label-icons', 'Number field with required and info icon', { 'type': 'number', 'value': 42, 'required_icon': true, 'info': 'Very important field info!', }) }} {{ f.number('form-input-number-disabled', 'Disabled', { 'disabled': true, 'value': 42, }) }} {{ f.number('form-input-number-readonly', 'Readonly', { 'readonly': true, 'value': 42, }) }} {{ f.number('form-input-number-wo-label', null, { 'type': 'number', 'value': 42, }) }}
Textarea
f.textarea(id, label, opt) {{ f.textarea('form-input-textarea', 'Textarea', { 'rows': 2, 'value': lipsum, }) }} {{ f.textarea('form-input-textarea-label-icons', 'Textarea with required and info icon', { 'required_icon': true, 'info': 'Very important field info!', 'rows': 2, 'value': lipsum, }) }} {{ f.textarea('form-input-textarea-wo-label', null, { 'required_icon': true, 'rows': 2, 'value': 'w/o label', }) }}
Select
f.textarea(id, label, data, opt) {{ f.select('form-input-select-1', 'Select 1', { 'opt1': 'Option 1', 'opt2': 'Option 2', 'opt3': 'Another option', 'opt4': 'A looooooooong item item item item', }) }} {{ f.select( 'form-input-select-2', 'Select 2', { 'sh': 'Bash', 'js': 'JavaScript', 'p': 'PHP', 'py': 'Python', }, { 'selected': 'js', }, ) }} {{ f.select('form-input-select-2', 'Select 3', selectOptions, { 'selected': 'option_7', }) }} {{ f.select('date-select', 'Date select', dateSelectOptions) }}
Buttons
f.button(label, opt)
{{ f.button('Button') }}
{{ f.button('sm button with icons', { 'size': 'sm', 'icon_left': 'check', 'icon_right': 'info', 'title': 'Click me!', }) }}
f.submit(label, opt)
{{ f.submit('Go!') }}
f.delete(label, opt)
{{ f.delete('Delete it', {'confirm_title': 'Delete some item'}) }}
Checkbox
f.checkbox(id, label, opt) {{ f.checkbox('form-input-checkbox', 'Checkbox 1', { 'checked': true, 'value': '1', }) }} {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2', { 'checked': false, 'value': '2', }) }} {{ f.checkbox('form-input-checkbox-3', 'Checkbox 3', { 'checked': false, 'value': '3', }) }}
{{ f.checkbox('form-input-checkbox-disabled', 'Disabled', { 'disabled': true, }) }} {{ f.checkbox('form-input-checkbox-raw-label', 'Raw label', { 'raw_label': true, }) }}
Switch
f.switch(id, label, opt) {{ f.switch('form-switch', 'Switch') }} {{ f.switch('form-switch-checked', 'Switch (checked)', { 'checked': true, }) }} {{ f.switch('form-switch-disabled', 'Switch (disabled)', { 'disabled': true, }) }}
Hidden
hidden(name, value)

{{ f.hidden('hidden-name', 'hidden value') | escape }}

Radio
Date / time

Other {{ m.icon('link') }}

Code

3.1415926535897932384626433832795 

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.

Pagination

Countdowns

  • 30s: %c
  • 30m: %c
  • 59m: %c
  • 1h: %c
  • 1h 30m: %c
  • 1h 31m: %c
  • 2h: %c
  • 2d: %c
  • 3m: %c
  • 22y: %c
  • 30m ago: %c
  • 45m ago: %c

Macros {{ m.icon('link') }}

base.twig

angel()

{{ m.angel() }}

icon(icon_name)

{{ m.icon('star') }}

iconBool(true)

{{ m.iconBool(true) }} {{ m.iconBool(false) }}

alert(message, type)

{{ m.alert('Test content', 'info') }}

user(user, opt)

{{ m.user(demo_user) }}
{{ m.user(demo_user_2, {'pronoun': true}) }}

button(label, url, type, size)

{{ m.button('Label', '#', 'info', 'sm') }}

Bar Chart {{ m.icon('link') }}

{{ bar_chart | raw }}
{% endblock %}