TEMPLATES
TEMPLATES

Last updated: 20.07.2020

Version: 1.0

Modals

Sketch name:

Molecules/Modal/Default

Tempalte Details:

Name:

Modal

Documentation:

https://www.contorion.de/designsystem/templates/modals

Template:

@application/components/templates/modal.template.twig

Twigprops:

headerText, headerSuccess, headerWarning, headerGrey, isHeaderRightElementVisible, regularSizeContent

Modal options

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Regular Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies orci fringilla lectus fermentum tincidunt. Ut eu gravida lorem. Curabitur viverra felis in volutpat gravida. Mauris metus tellus, imperdiet eget lacus nec, blandit ultricies mauris. Vestibulum ut pellentesque libero. Fusce pretium fermentum felis, nec ultrices libero viverra non. Sed pharetra orci vel vestibulum aliquam. Mauris vehicula blandit quam vitae tincidunt. Nunc sed risus at nisl fermentum luctus.

Panel Footer

Full Width Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies orci fringilla lectus fermentum tincidunt. Ut eu gravida lorem. Curabitur viverra felis in volutpat gravida. Mauris metus tellus, imperdiet eget lacus nec, blandit ultricies mauris. Vestibulum ut pellentesque libero. Fusce pretium fermentum felis, nec ultrices libero viverra non. Sed pharetra orci vel vestibulum aliquam. Mauris vehicula blandit quam vitae tincidunt. Nunc sed risus at nisl fermentum luctus.

Panel Footer

Success Headed Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies orci fringilla lectus fermentum tincidunt. Ut eu gravida lorem. Curabitur viverra felis in volutpat gravida. Mauris metus tellus, imperdiet eget lacus nec, blandit ultricies mauris. Vestibulum ut pellentesque libero. Fusce pretium fermentum felis, nec ultrices libero viverra non. Sed pharetra orci vel vestibulum aliquam. Mauris vehicula blandit quam vitae tincidunt. Nunc sed risus at nisl fermentum luctus.

Panel Footer

Warning Headed Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies orci fringilla lectus fermentum tincidunt. Ut eu gravida lorem. Curabitur viverra felis in volutpat gravida. Mauris metus tellus, imperdiet eget lacus nec, blandit ultricies mauris. Vestibulum ut pellentesque libero. Fusce pretium fermentum felis, nec ultrices libero viverra non. Sed pharetra orci vel vestibulum aliquam. Mauris vehicula blandit quam vitae tincidunt. Nunc sed risus at nisl fermentum luctus.

Panel Footer

Error Headed Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies orci fringilla lectus fermentum tincidunt. Ut eu gravida lorem. Curabitur viverra felis in volutpat gravida. Mauris metus tellus, imperdiet eget lacus nec, blandit ultricies mauris. Vestibulum ut pellentesque libero. Fusce pretium fermentum felis, nec ultrices libero viverra non. Sed pharetra orci vel vestibulum aliquam. Mauris vehicula blandit quam vitae tincidunt. Nunc sed risus at nisl fermentum luctus.

Panel Footer

Grey Headed Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies orci fringilla lectus fermentum tincidunt. Ut eu gravida lorem. Curabitur viverra felis in volutpat gravida. Mauris metus tellus, imperdiet eget lacus nec, blandit ultricies mauris. Vestibulum ut pellentesque libero. Fusce pretium fermentum felis, nec ultrices libero viverra non. Sed pharetra orci vel vestibulum aliquam. Mauris vehicula blandit quam vitae tincidunt. Nunc sed risus at nisl fermentum luctus.

Panel Footer

Responsive:

All Sketch symbols
Molecules/Modal/Default
Molecules/Modal/Action
Molecules/Modal/Default