Template:Panel

Description

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

Panel with just some content

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

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

Sup, I have a heading

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.

Panel with footer

Sup, I have a heading

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.

Check it out, I have a footer as well

CODE

{{Panel
  | heading = Sup, I have a heading
  | content = {{Lorem}}
  | footer = Check it out, I have a footer as well
}}

Panel with a table

Panels with tables

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

Panels with content and a table

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

Panels with list-groups

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

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

Heading

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.

Footer

CODE

{{Panel
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel primary

Heading

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.

Footer

CODE

{{Panel
  | type = primary
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel success

Heading

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.

Footer

CODE

{{Panel
  | type = success
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel info

Heading

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.

Footer

CODE

{{Panel
  | type = info
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel warning

Heading

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.

Footer

CODE

{{Panel
  | type = warning
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel danger

Heading

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.

Footer

CODE

{{Panel
  | type = danger
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}