Styled Panel Container

This block is unique from the others in that it is a block that contains other blocks.  The purpose of this block is to create full-width backgrounds of either a color or a color and image, with content floated over the top of it.  The following example is a panel that has a red background with the PACS logo, and three columns of content over it.

Other styled panels may have a shaded background and a grid inside it.

This image has an empty alt attribute; its file name is 7HTOJyqTmdpTg6VBAgIhpeEXJchpMwAQ9IydwoR8MUmVa8dLaAkQs4USTfMU09rsMJHevx2zwy4Dc-qoyUbL7cnG7lcQgDpIa4KhkzIZc8aAVyt4SXw5qDSXb1W8do2PKx1oak9g

Adding a Styled Panel Container

You would add a Styled Panel Container the way you would add any other block.  Once it’s added you can fill it in with content and also set the properties of the panel.

This image has an empty alt attribute; its file name is lPpQUSzHYwxfxtQUBDRr6_MyHTXOlHPBxBSmf1hiVpSiQ_VeYV9TgwNdVd8SK9b0ibhcw5_gTVxwZq3dGbJpn7oEkvsYRxO5pv8quXTjc-mNAmnv0NvpFHVAbEWZPUopPiOHbFJa

The options you can set for the Styled Panel Container are the following:

  • Color Scheme
  • Background Image (optional)
  • Min Height (in pixels)
  • Full Width Content (whether the content is full width – the background always will be)
  • Is Collapsed? (whether to show only a title and an expandable box)
  • Collapsed Title

Color Schemes

There are preset color schemes that can be selected which define the background and the foreground colors and properties.

Black on White – you would generally only use this with a background image because otherwise the panel is not really adding anything.)

This image has an empty alt attribute; its file name is ZsgywnW5mAA2lp7tbaaJDxNTtO-jB3wMYOa3kj-Vno43iuSIAvV9_VyD1phawg1ZJwkMNMsq-L3q_UoMpkLwyYAmuoDnXTJ55ERqhsRS4FglLNlil0sLV3kBiHaPtpqL4siY5Udb

Black on Grey – Black text on a grey/tan background

This image has an empty alt attribute; its file name is wvHFAk3f-CdCTN17yEsGxWUc0Qm_w_o2cbYMRtZiPBnYuFznNmOcoXU9RGdGCYg8taTla8MjzVlvruBcZcM67eCXAxnqrwX_k5hSlirJbJ7ngvMw3Z1R2I1P92d26CeW0p23tWs7

White on Red – Red gradient background with PACS logo

White on Background Image – White text over a background image

This image has an empty alt attribute; its file name is xbLWUS1XMGzUhpjr64yZF7X5HOVDUbGElyQFBtVEeNOrWLGBHUDex23cWtImyK7nd0u4cXvsekGThhrxnWtVQxoADZVKTnGUVUpqFHje_KMKKzNQyv8Bz8IJ55B9Kn_dhQ-gF_OE

Black on Grey with Logo

This image has an empty alt attribute; its file name is GXGqIX_lqCz_OO3oFVh_dReoI0YyrKaQ1O3A8rRkHk74fpoxTlvY-qs-MwUmQTpbH4Y85fF0G0npRCFdcqXr33254q2W1_6gCglbE0-Nou__T7Lm5f80w0QTxeSoYYTmzib8bws6

Selecting Styled Panel Container

When you edit the properties of a block you need to select that block to activate the editing box.  With a container block right this it can sometimes be challenging to select this because you are more likely to click on one of the inner blocks than the outer container.

If you click just outside the inner blocks you can probably get it.  Otherwise, there is another method you can use.  At the top of the screen there is an icon with three dashes, each dash indented a little to the right of the one below it.  This is the block navigation.  It’s a simple way to see the hierarchy of the selected blocks and it makes it easier to select the Styled Panel Container.

Collapsible Panel

If you want to create a panel, but you want it to show up collapsed by default, you can set the panel to be collapsed.  In this case you will be asked to choose a title for the panel.  The title and a plus sign will appear in the collapsed panel and the full contents will show once those are clicked.

This image has an empty alt attribute; its file name is cQRksUk0jvI6s79lCycHv-K1pHb9jqfJ8PFY813rn477sLIIUUjuVwspbXYMiBkNw4B78X9VL8F_jMytsvAwJ_CTJ7EqnoitN-Klu01UP5B5HGGVnZ_UT604woK0k4OrRwOAo3Ff