Panel

Processor name: panel

You can include an panel using the following text tag:

{panel type="teacher-note" subtitle="true"}

# Teacher Note

## Curriculum guides for Algorithms

This text is the panel's contents.

{panel end}

The title and subtitle are the first Level 1 and Level 2 Headings within the panel. They are within the panel rather than given as parameters to allow translation systems to easily identify which text should be translated.

Required Tag Parameters

  • type - The type of panel to create.

    • The type is saved as a CCS class (with panel- prefix) in the panel (this allows colouring of all the same types of panels).

Optional Tag Parameters

  • subtitle - Boolean flag to indicate whether the panel should display a subtitle.

    • If given as true, then the subtitle is the first Level 2 Heading within the panel.
  • expanded - A value to state the panel’s state:

    • If given as ‘true’, the panel contains the CSS class panel-expanded to state it should be expanded on load.
    • If set to ‘always’, the panel contains the CSS class panel-expanded-always to state it should be expanded at load and cannot be closed.
    • When expanded is not given or not a value above, the panel contains no extra CSS classes and be closed on load.

The default HTML for a panel is:

<div class='panel panel-{{ type }}{% if expanded == 'always'%} panel-expanded-always{% elif expanded == 'true' %} panel-expanded{% endif %}'>
<div class='panel-header'>
<strong>{{ title }}{% if subtitle %}:</strong> {{ subtitle }}{% else %}</strong>{% endif %}
</div>
<div class='panel-body'>
{% autoescape false -%}
{{ content }}
{% endautoescape -%}
</div>
</div>

Using the following example tag:

{panel type="teacher-note" subtitle="true"}

# Teacher Note

## Curriculum guides for Algorithms

This text is the panel's contents.

{panel end}

The resulting HTML would be:

<div class="panel panel-teacher-note">
<div class="panel-header">
<strong>Teacher Note:</strong> Curriculum guides for Algorithms
</div>
<div class="panel-body">
<p>This text is the panel's contents.</p>
</div>
</div>

Overriding HTML for Panels

When overriding the HTML for panels, the following Jinja2 placeholders are available:

  • {{ type }} - The type of panel to be created.
  • {{ expanded }} - Text either set to ‘true’ or ‘always’ to state if the panel should be expanded. See parameter description above.
  • {{ title }} - The provided title text.
  • {{ subtitle }} - The provided subtitle text.
  • {{ content }} - The text enclosed by the panel tags.

Example

For example, providing the following HTML:

<div class="card">
<div class="card-header">
<h5 class="mb-0">
<strong>{{ title }}{% if subtitle %}:</strong> {{ subtitle }}{% else %}</strong>{% endif %}
</h5>
</div>
<div class="collapse{% if expanded == 'always'%} show-always{% elif expanded == 'true' %} show{% endif %}">
<div class="card-block">
{{ content }}
</div>
</div>
</div>

with the following tag:

{panel type="note" expanded="true"}

# Note

This panel uses Bootstrap 4 card structure.

{panel end}

would result in:

<div class="card">
<div class="card-header">
<h5 class="mb-0">
<strong>Note</strong>
</h5>
</div>
<div class="collapse show">
<div class="card-block">
<p>This panel uses Bootstrap 4 card structure.</p>
</div>
</div>
</div>