ON THIS WIKI
Template:Panel
Contents
Description[edit]
Used to contain some content in a nicely-organised way. Panels provide a means to box some content up, and make it a little more prominent.
Examples[edit]
Panel with just some content[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | content = {{Lorem}} }}
Panel with custom width[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | width = 25% (or any pixel value, e.g. 400px) | content = {{Lorem}} }}
Panel with heading[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | heading = Sup, I have a heading | content = {{Lorem}} }}
By default, panel headings aren't rendered as proper H3 tags, and are therefore excluded from the page's table of contents generation.
To revert this behaviour, simply add |useFullHeading = true
.
[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | heading = Sup, I have a heading | content = {{Lorem}} | footer = Check it out, I have a footer as well }}
Panel with a table[edit]
Table Heading | Table Heading | Table Heading | Table Heading |
---|---|---|---|
Supply a table | instead of content | and the table will | lead on seamlessly |
Which is pretty | damn cool. |
CODE
{{Panel | heading = Panels with tables | table = <div class="table-responsive"> <table class="table table-striped table-bordered"> <tr> <th>Table Heading</th><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th> </tr> <tr> <td>Supply a table</td><td>instead of content</td><td>and the table will</td><td>lead on seamlessly</td> </tr> <tr> <td colspan="2">Which is pretty</td><td colspan="2">damn cool.</td> </tr> </table> </div> }}
Panel with content and table[edit]
If you supply content as well as a table, the table's appearance will lead on from the content to appear set-in.
Table Heading | Table Heading | Table Heading | Table Heading |
---|---|---|---|
Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data |
CODE
{{Panel | heading = Panels with content and a table | content = If you supply content '''''as well''''' as a table, the table's appearance will lead on from the content to appear set-in. | table = <div class="table-responsive"> <table class="table table-striped"> <tr><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th></tr> <tr><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr> <tr><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr> <tr><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr> </table> </div> }}
Panels with list-groups[edit]
Panels can have list-groups attached. See Responsive_Components#List_group for more details on how to format these.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
CODE
{{Panel | heading = Panels with list-groups | content = Panels can have list-groups attached. See [[Bootstrap_Documentation/Responsive_Components#List_group|Responsive_Components#List_group]] for more details on how to format these. | list-group = <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> }}
Contextual alternatives[edit]
Supply a type - one of either primary, success, info, warning, or danger - and you can change the general appearance of the panel depending on the context. If not supplied, will default to the 'default' type.
Panel Default[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | heading = Heading | content = [[File:Grid Tool Station.png|thumb|right]] {{Lorem}} | footer = Footer }}
Panel primary[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | type = primary | heading = Heading | content = [[File:Grid Tool Station.png|thumb|right]] {{Lorem}} | footer = Footer }}
Panel success[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | type = success | heading = Heading | content = [[File:Grid Tool Station.png|thumb|right]] {{Lorem}} | footer = Footer }}
Panel info[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | type = info | heading = Heading | content = [[File:Grid Tool Station.png|thumb|right]] {{Lorem}} | footer = Footer }}
Panel warning[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | type = warning | heading = Heading | content = [[File:Grid Tool Station.png|thumb|right]] {{Lorem}} | footer = Footer }}
Panel danger[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CODE
{{Panel | type = danger | heading = Heading | content = [[File:Grid Tool Station.png|thumb|right]] {{Lorem}} | footer = Footer }}