{% 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_color=[ ['primary', 'light'], ['secondary', 'light'], ['success', 'light'], ['danger', 'light'], ['warning', 'dark'], ['info', 'dark'], ['light', 'dark'], ['dark', 'light'], ] %} {% 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_color %} {{ type[0]|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 %}

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

{{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
{{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
{{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
{{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
{{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
{{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
{{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
{{ f.select('form-input-select-1', {'opt1': 'Option 1', 'opt2': 'Option 2', 'opt3': 'Another option', 'opt4': 'A looooooooong item item item item'}, 'Select 1', 'opt1') }} {{ f.select('form-input-select-2', {'sh': 'Bash', 'js': 'JavaScript', 'p': 'PHP', 'py': 'Python'}, 'Select 2', 'js') }} {{ f.select('form-input-select-2', selectOptions, 'Select 3', 'Option 7') }} {{ f.select('date-select', dateSelectOptions, 'Date select') }}
{{ f.button('Button') }}
Form submit
{{ f.submit() }}
Checkbox
{{ f.checkbox('form-input-checkbox', 'Checkbox 1', true, '1') }} {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2', false, '2') }} {{ f.checkbox('form-input-checkbox-3', 'Checkbox 3', false, '3') }}
Select all
Select 2, 3
Unselect all
Radio

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

Code

3.1415926535897932384626433832795

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') }}

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') }}

form.twig

input(name, label, type, opt)

{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}

textarea(name, label, opt)

{{ f.textarea('textarea-name', 'Label', {'required': true, 'rows': 2, 'value': lipsum}) }}

select(name, data, label, selected)

{{ f.select('select-name', {'foo': 'Foo', 'bar': 'Bar'}, 'Label', 'bar') }}

checkbox(name, label, checked, value)

{{ f.checkbox('checkbox-name', 'Label', false) }}
{{ f.checkbox('checkbox-name', 'Label', true, 'on') }}

hidden(name, value)

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

button(label, opt)

{{ f.button('Label', {'name': 'button-name', 'value': 'buton-value'}) }}

submit(label, opt)

{{ f.submit() }}

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

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