Panel
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).
Default panel (no visual treatment).
Primary panel (primary highlight level).
Secondary panel (secondary highlight level).
Large icon panels add a callout icon.
Code
<div class="ace-panel">
<p>Default panels have no visual treatment, but add spacing when combined with Layout. Note the content of panels can still affect layout.</p>
</div>
<div class="ace-panel ace-panel-primary">
<p>Primary panel.</p>
</div>
<div class="ace-panel ace-panel-secondary">
<p>Secondary panel.</p>
</div>
<div class="ace-panel ace-panel-primary ace-panel-icon"><span class="ace-icon ace-icon-objects-question">Question</span>
<p>Primary panel with Question icon.</p>
</div>
<div class="ace-panel ace-panel-secondary ace-panel-icon"><span class="ace-icon ace-icon-objects-answer">Answer</span>
<p>Secondary panel with Answer icon.</p>
</div>
<div class="ace-panel ace-panel-secondary ace-panel-icon-space">
<p>Secondary panel set to icon space.</p>
</div>
<% ace.Panel(Array())
%><p>Default panel in an item.</p><%
ace.PanelEnd
ace.Panel(Array("type", "primary"))
%> <p>Primary panel in an item.</p><%
ace.PanelEnd
ace.Panel(Array("type", "secondary"))
%><p>Secondary panel in an item.</p><%
ace.PanelEnd %>
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.
<div class="ace-group">
<div class="ace-item">
<div class="ace-panel">
<p>Default panel in an item.</p>
</div>
</div>
<div class="ace-item">
<div class="ace-panel">
<p>Default panel in an item.</p>
</div>
</div>
</div>
<div class="ace-group">
<div class="ace-item">
<div class="ace-panel ace-panel-primary">
<p>Primary panel in an item.</p>
</div>
</div>
<div class="ace-item">
<div class="ace-panel ace-panel-primary">
<p>Primary panel in an item.</p>
</div>
</div>
</div>
<div class="ace-group">
<div class="ace-item">
<div class="ace-panel ace-panel-secondary">
<p>Secondary panel in an item.</p>
</div>
</div>
<div class="ace-item">
<div class="ace-panel ace-panel-secondary">
<p>Secondary panel in an item.</p>
</div>
</div>
</div>
<div class="ace-group">
<div class="ace-item">
<div class="ace-panel ace-panel-primary">
<p>Primary panel in an item.</p>
</div>
</div>
<div class="ace-item">
<div class="ace-panel ace-panel-primary">
<p>Primary panel in an item.</p>
</div>
</div>
<div class="ace-item">
<div class="ace-panel ace-panel-primary">
<p>Primary panel in an item. </p>
</div>
</div>
</div>
<% ace.Group(Array())
ace.Item(Array())
ace.Panel(Array()) %>
<p>Default panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.Item(Array())
ace.Panel(Array()) %>
<p>Default panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.GroupEnd
ace.Group(Array())
ace.Item(Array())
ace.Panel(Array("type", "primary")) %>
<p>Primary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.Item(Array())
ace.Panel(Array("type", "primary")) %>
<p>Primary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.GroupEnd
ace.Group(Array())
ace.Item(Array())
ace.Panel(Array("type", "secondary")) %>
<p>Secondary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.Item(Array())
ace.Panel(Array("type", "secondary")) %>
<p>Secondary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.GroupEnd
ace.Group(Array())
ace.Item(Array())
ace.Panel(Array("type", "primary")) %>
<p>Primary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.Item(Array())
ace.Panel(Array("type", "primary")) %>
<p>Primary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.Item(Array())
ace.Panel(Array("type", "primary")) %>
<p>Primary panel in an item.</p>
<% ace.PanelEnd
ace.ItemEnd
ace.GroupEnd %>