This shows the full colour pallet used in Foundry, including the base texture applied to some elements.
Paragraph text
Small paragraph text
This is an example of the collapsing Noticeboard created for the Foundry system.
Based on the Bootstrap collapsable panels, it has been styled to show a clear heirachy of information as well as badges highlighting any outstanding actions that need to completed. The To Do list is set to be open on default.
First of all the main panel should have a class of .noticeboard added to it.
It has a top .panel-heading with just the H3 heading of Noticeboard, this has .badge attached that calculates the total of the badges in the following 3 sections (To Do, Waiting and Reference).Each sections has no .panel, just a .panel-heading followed by a .panel-body, with a .panel-footer sitting WITHIN the .panel-body, so that footer is hidden when the panel collapses.
Each Panel Heading has a data-toggle .collapse, and a data-target and href of it's ID (#todo, #waiting or #reference). Each Section Panel Body also needs the relative ID added to it as well as the class of .collapse. The first section (To Do) should also have the class of .in added to it's Panel Body, so that it is open at refresh.Each Section has the articles within the Panel Body in this order.
.notice-article and within that,Each article is serapted by a DIV with a class of .divide-dots.
And finishes of with a Panel Footer with the Panel Body.