Panels are visually separated blocks of information, usually relating to a specifc Cloud Foundry Entity or a set of Cloud Foundry entities. They are white, set on a gray background and have space between them top and bottom. They also include , but don’t require, panel headers, a panel title and panel actions.
The panel header is a header bar placed at the top of the panel to display the panel title along with any support information or actions which relate to the content in the panel. To use a panel header:
header
or other HTML element with a class of panel-header
.div
with a class of panel-header-content
. This will ensure these
items always appear aligned right from the title, but will grow to the left
depending until they reach eachother.The panel title is differently styled h
tag specficially meant to fit within
a panel. It should not be used outside of a panel and should always be used
when naming a panel. To use, simply put the title in an h2
or lower HTML
element with a class of panel-title
within the Panel header.
Panel actions are one or multiple sets of actions that are meant to be performed
on content of the panel. An example would be a “Add new service” button on the
services panel. To use the panel actions, create a section
or div
HTML
element with the panel-actions
class and any modifier panel action classes.
The modifier classes are as follows:
panel-actions-right
: Aligns all actions to the right of the panel.panel-actions-both
: Aligns items both to the left and right of the panel.
<section class="panel">
<header class="panel-header">
<h2 class="panel-title">Panel title</h2>
<div class="panel-header-content">
<span>Panel data point</span>
<button>Panel action</button>
</div>
</header>
<section class="panel-documentation panel-documentation-desc">
<p>Use this marketplace to create service instances for spaces in this org. Then bind service instances to apps using the command line.
<a href="https://docs.cloud.gov/apps/managed-services/">Learn about using
service instances and marketplaces</a>.
</p>
</section>
<section class="panel-actions panel-actions-both">
<p>View advanced logs at <a href="https://logs.cloud.gov">logs.cloud.gov</a></p>
<button>Action</button>
</section>
</section>
<section class="panel">
<header class="panel-header">
<h2 class="panel-title">Panel title</h2>
<div class="panel-header-content">
<span>Panel data point</span>
<button>Panel action</button>
</div>
</header>
<section class="panel-documentation panel-documentation-desc">
<p>Use this marketplace to create service instances for
spaces in this org. Then bind service instances to apps using the command line.
<a href="https://docs.cloud.gov/apps/managed-services/">Learn about using
service instances and marketplaces</a>.
</p>
</section>
<section class="panel-actions panel-actions-both">
<p>View advanced logs at <a href="https://logs.cloud.gov">logs.cloud.gov</a></p>
<button>Action</button>
</section>
</section>
/* No context defined for this component. */