Skip to main content

This is a header

This is used throughout most of the site.

The image and colour can be adjusted

“This is a video header. It loads a script via shortcode”

“This is a full width image header mainly used for appeals if no video to use”

Header 1

Header 2

Header 3

Header 1 museo class

Header 2 museo class

Header 3 museo class

Paragraph

This is a link
Button

  • Unordered list item
  1. Ordered list item

Selection Boxes

Containers

It’s all just bootstrap containers, rows and columns so you can do whatever you like with it.

Like containers…

Full width containers

Containers can use a class ‘cont-padding-three’ to get a bit of breathing space.

Column 1

Column 2

Column 1

Column 2

Column 3

Highlight boxes

Highlight Box

There are a few different types of highlight box

Like this one that has a full height image and padding around the text

Highlight Box

This highlight box has less space around it and is suitable as a card-type element

 

 

 

The images for these are controlled by the CSS

Because the text columns can grow and shrink but the image will fill its container

Highight Box with an Image

This type of highlight box is found mainly on the health information pages like COPD

Button

Tile Cards

These are handy for choices on event pages

Like the Halloween Blackout Event

Go there

Tile Cards

These are handy for choices on event pages

Like the Halloween Blackout Event

Button

Story quote boxes

Usually found next to someone’s story about how they got help from CHSS or how your suppoert helps people like…

“Chest Heart & Stroke Scotland were there for me and helped me find my way back to the person I was before the stroke.”

“Chest Heart & Stroke Scotland were there for me and helped me find my way back to the person I was before the stroke.”

“Chest Heart & Stroke Scotland were there for me and helped me find my way back to the person I was before the stroke.”

“CHSS has been so vital to my recovery”

“CHSS has been so vital to my recovery”

“CHSS has been so vital to my recovery”

Accordian

This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Get in touch form

Side by side with the form to the right

Mainly found on event pages

Like the Glenlivet 10K
Which has an event contact form with ‘Glenliet 10K’ passed as a field_value to the form so a hidden selection box option is chosen on the form and it will therefore be sent to a specific memeber of the fundraising team upon submission.

Share this page
  • Was this helpful ?
  • YesNo