Design

Panels are simple containers that are used to organise content and functionality within a grid on the page. They are commonly integrated with the Layout components (group and item).

Examples

Default panel (no visual treatment).

Primary panel (primary highlight level).

Secondary panel (secondary highlight level).

Question

Quantum missus ligna

Icon panels add a large callout icon. Questions, Answers and Comments can all be clearly shown with this pattern.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Answer

Responsum

Utinam barbari spatium proprium tuum invadant! Di! Ecce hora! Uxor mea me necabit! Sona si Latine loqueris. Si Hoc Legere Scis Nimium Eruditionis Habes. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Quantum materiae materietur marmota monax si marmota monax materiam possit materiari? Utinam barbari spatium proprium tuum invadant! Di! Ecce hora! Uxor mea me necabit! Sona si Latine loqueris. Si Hoc Legere Scis Nimium Eruditionis Habes. Sentio aliquos togatos contra me conspirare.

Comment

Ingrata initus

Ceterum censeo Carthaginem esse delendam!

Download

Download your archive

Keep in mind that any icon can be used in this pattern.

You can use the iconSpace setting to display a panel with spacing that matches icon panels.

Integration with Layout

When a single panel is used inside a Layout item (that is, it's the only child element of the +ace-item() element) it will automatically receive basic horizontal spacing:

Default panel in an item.

Default panel in an item.

Primary panel in an item.

Primary panel in an item.

Secondary panel in an item.

Secondary panel in an item.

Primary panel in an item.

Primary panel in an item.

Primary panel in an item.

Code

Example Element Code

Default panel.

 Default Panel (no visual treatment). 

                                                                                          <div class="ace-panel">
                                                                                            <p class="ace-p">Default panel.</p>
                                                                                          </div>

                                                                                      <% ace.Panel(Array()) %>
                                                                                        <p>Default panel in an item.</p>
                                                                                      <% ace.PanelEnd %>

Primary panel.

 Primary Panel. 

                                                                                          <div class="ace-panel ace-panel-primary">
                                                                                            <p class="ace-p">Primary panel.</p>
                                                                                          </div>

                                                                                      <% ace.Panel(Array("type", "primary")) %>
                                                                                        <p>Primary panel.</p>
                                                                                      <% ace.PanelEnd %>

Secondary panel.

 Secondary Panel. 

                                                                                          <div class="ace-panel ace-panel-secondary">
                                                                                            <p class="ace-p">Secondary panel.</p>
                                                                                          </div>

                                                                                      <% ace.Panel(Array("type", "secondary")) %>
                                                                                        <p>Secondary panel.</p>
                                                                                      <% ace.PanelEnd %>
Question

Question

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Answer

Answer

Quod, sicut potest.

Comment

Comment

Id quod positum est, si Africae et Europae mittam!

 Icon Panel adds an icon, while also accepting the usual primary or secondary types. Question, Answer and Comment are common uses of this pattern; although any icon works.

Question:


                                                                                          <div class="ace-panel ace-panel-primary ace-panel-icon"><span class="ace-icon ace-icon-objects-question" title="Question">Question</span>
                                                                                            <h2 class="ace-h2">Question</h2>
                                                                                            <p class="ace-p">Quantum materiae materietur marmota monax si marmota monax materiam possit materiari? </p>
                                                                                          </div>

Answer:


                                                                                          <div class="ace-panel ace-panel-primary ace-panel-icon"><span class="ace-icon ace-icon-objects-answer" title="Answer">Answer</span>
                                                                                            <h2 class="ace-h2">Answer</h2>
                                                                                            <p class="ace-p">Quantum materiae materietur marmota monax si marmota monax materiam possit materiari? </p>
                                                                                          </div>

Comment:


                                                                                          <div class="ace-panel ace-panel-secondary ace-panel-icon"><span class="ace-icon ace-icon-objects-comment" title="Comment">Comment</span>
                                                                                            <h2 class="ace-h2">Comment</h2>
                                                                                            <p class="ace-p">Quantum materiae materietur marmota monax si marmota monax materiam possit materiari? </p>
                                                                                          </div>

Question:


                                                                                      <% ace.Panel(Array(_
                                                                                        "icon", "objects-question",_
                                                                                        "iconText", "Question"_
                                                                                      )) %>
                                                                                        <p>Question panel.</p>
                                                                                      <% ace.PanelEnd %>

Answer:


                                                                                      <% ace.Panel(Array(_
                                                                                        "icon", "objects-answer",_
                                                                                        "iconText", "Answer"_
                                                                                      )) %>
                                                                                        <p>Answer panel.</p>
                                                                                      <% ace.PanelEnd %>

Comment:


                                                                                      <% ace.Panel(Array(_
                                                                                        "icon", "objects-comment",_
                                                                                        "iconText", "Comment"_
                                                                                      )) %>
                                                                                        <p>Comment panel.</p>
                                                                                      <% ace.PanelEnd %>

Spaced to match icon panel.

 Icon-space Panel 

                                                                                          <div class="ace-panel ace-panel-secondary ace-panel-icon-space">
                                                                                            <p class="ace-p">You can use the iconSpace setting to display a panel with spacing that matches icon panels.</p>
                                                                                          </div>

                                                                                      <% ace.Panel(Array(_
                                                                                        "iconSpace", true _
                                                                                      )) %>
                                                                                        <p>Icon-spaced panel.</p>
                                                                                      <% ace.PanelEnd %>