Hero Banner Title

This is the Hero Banner component. This component accepts a Desktop version as well as a Mobile version of the image. You cannot freely move the different aspects of this component (ie. CTA and Second CTA)

CTA Text Second CTA

Hero Banner Card

This is a part of the Hero Banner Component and is optional.

Second CTA

Container Component

This is the Container Component, all other components are housed within a Container component. With the Container Component, you control the text alignment, the width of the content within it (this section is skinny, below is standard) as well as the background colour (White, Grey, Blue or Purple) to easily create a divide within the webpage.

Grid Row

 

This is a Grid Row. A Grid Row is how we divide the page up into 2, 3, 4, or 6 columns. We use this component a lot as it is an effective way of organizing the content.

 

We can put other components within these columns to achieve the desired layout provided to us by the UX team. Such as this Text compontent, or the Adaptive Image component in the Middle, or the Table component on the Right.

Column A Column B
Row A 1 2
Row B 2 4
Row C 3 6

Additionally, when using a 2-column grid-row, you can adjust the distribution of the columns.

The distribution options are:

  • 70/30
  • 30/70 - Which is what this gridrow is set to.
  • 60/40
  • 40/60

Text

This is the text component.

 

With the text component, we have the option to:

  • Bold text
  • Italicize text
  • Create Bullet/Numbered lists

 

We cannot, add superscript, subscripts, or other symbols not found on the keyboard.

Adaptive Image

This is the Adaptive Image component. With this component, you can:

 

  1. Display a photo that has been uploaded into the AEM Assets.
  2. Hyperlink the photo (as seen above)
  3. Add a pop-up caption (hold your mouse still over the image for a couple seconds)
  4. Place it within other components (such as the Grid Row further up the page)

Cards

Cards are used to create a border around another component (ie. this text component)

With this component, you have the option to:

  • Add a blue or green border to the top 
  • Adjust the padding
  • Add/Remove the rounded corners. 

Contact Form

Asterisk indicates required fields

I would like to receive email communications from Spectrum Therapeutics, its affiliates, and its marketing partners containing information and exclusive offers with respect to products and services, special events and store promotions. I understand that I can unsubscribe at any time.

These are the all the possible fields that can be put into a contact form. You can choose to remove these fields, but you can't add others. You are also able to alter the place holder text for these fields (ie. First Name, Last Name, Country, etc.)

You are able to add more options into the "Reason For Contact" drop down. With these options, you can choose a different email the form gets sent to. 

 

You are able to choose the default email address this contact form gets sent to, the subject line of that email, where the user gets redirected to after submitting the form, and an error message (ie. "Email not sent! Please try again later.").

FAQ Components

There are four different components that make up our FAQ sections. These being:

  1. FAQ Container
  2. FAQ Category
  3. FAQ Item
  4. FAQ Question

I'll go over each of them in turn and then give examples of them working together.

1. FAQ Container

The first is the "FAQ Container" component. For the other 3 FAQ components to function properly, they must be housed within a FAQ Container component. Other than that it doesn't serve much purpose.

2. FAQ Category

3. FAQ Item

This is an FAQ Item, similar drop down functionality to the FAQ Category, but there are a couple notable differences.

  1. The FAQ Category component doesn't have a built in text section. The FAQ Item does, hense the styling difference between this text and the text in the FAQ Category component above. 
  2. You CANNOT nest other components within this component (Like you can with the FAQ Category).
  3. This component isn't typically used as a stand alone component (even though it can), it is typically nested within the FAQ Category component.


In terms of configuration, as stated above, you can alter the title (FAQ Item Component) as well as the body text within this component.

4. FAQ Question

This is the FAQ Question Component. Again, similar dropdown functionality to the other FAQ components. It allows for components to be placed within it, similarly to the FAQ Category component.

 

In terms of configuration, you can only change the title ("FAQ Question Component").

These are the 4 FAQ components. The best example currently on the website is out the patients page where we have FAQ Item's nested within FAQ Categories to create a feature that houses a lot of information within a small area. 

This website uses cookies to recognize your computer or device to give you the best user experience and to improve its features. You can disable cookies through your browser but some features of the site will no longer be available. Read our Website Privacy Statement