Panels
Panles provide scaffolding for displaying content with a header, body and footer. They are templates since they only provide layout information and not the styling information. Panel headers use title-header.molecule for displaying headers with different themes.
Sketch name:
Molecules/Panel/Default
Tempalte Details:
Name:
Panel
Documentation:
https://www.contorion.de/designsystem/templates/panel
Template:
@application/components/templates/panel.template.twig
Twigprops:
headerBorderTop, containerBorderNone, collapsibleForBreakpoints, bodyPaddingSmall, bodyPaddingNone, headerText, headerTitleClasses, headerRightText, headerSuccess, headerWarning, headerGrey, headerError, headerDefault, headerPrimary, headerLogo, headerRightIcon, headerPrimaryResponsive, isHeaderRightElementVisible, headerClasses, headerPaddedWide, attr, headerAttr, bodyAttr
Default panel
ReadyFluid:
Default Header
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.
Responsive:
Panel types
ReadyFluid:
Success Header
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.
Error Header
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.
Warning Header
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.
Grey Header
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.
Responsive:
Panel miscellaneous
ReadyFluid:
Header without bottom border
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.
Top Border
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.
Responsive:
Panel padding
ReadyFluid:
Smaller padded body
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.
No padded body
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.