Shape Component
Shape component allow us to distinguish and highlight various messages. When combined with text in our vibrant palette, they serve to clarify and direct. The rounded edges of our communication shapes add an organic and human touch.
I'm the Shape component
Best practice
Small text in orange Speech bubble
Small Small Small Small Small Small Small Small Small Small Small Small
Medium text in liliac Speech bubble
Medium Medium Medium
Large text in turquoise Speech bubble
Large
Small text in liliac Circle
Small Small Small Small Small Small Small Small
Medium text in turquoise Circle
Medium Medium Medium
Large text in orange Circle
Large
Small text in turquoise Balloon
Small Small Small Small Small Small Small Small
Medium text in orange Balloon
Medium Medium Medium
Large text in liliac Balloon
Large
Note: Examples for the text 'Large and Small' will be added here as soon as the option is fully developed.
Shape components help to elevate, reinforce content, and guide the customer, and the message should be short and concise.
Do
Anmäla skada
Don't
Anmäla skada via telefon och online
Avoid overusing shapes on a page; there should be a maximum of 1-2 per page.
Do
- For headlines, use the Headline component or the heading format in the Rich Text Editor.
Kontakta oss
Prata pension med oss
Öppet vardagar 08.00-18.00. Stängt helger och röda dagar.
Don't
- Do not use Shape component as headline. The text is not formatted as a headline. Therefore, using it as such can have a negative impact on accessibility and SEO.
Prata pension med oss
Öppet vardagar 08.00-18.00. Stängt helger och röda dagar.
Do
- Only use in Flex container with 1-2 or 2-1 layout, and always place it in the first column.
- The component should always have a background color to clearly indicate what it is associated with.
- It can be positioned on the left or right.
Kontakta oss
Prata pension med oss
Öppet vardagar 08.00-18.00. Stängt helger och röda dagar.
Prata pension med oss
Öppet vardagar 08.00-18.00. Stängt helger och röda dagar.
Kontakta oss
Don't
- Never use Shape component without a background color.
- Never use Shape component separately; they must be placed in a Flex container.
Prata bolån med oss
Det är mycket att tänka på när man köper bostad. Ring oss så hjälper vi dig.
Kontakta oss
Övriga bolånetjänster
Do
- Only the Shape component should be placed in the column.
Prata bolån med oss
Övriga bolånetjänster
Don't
- Avoid placing multiple components in the same column as a Shape.
Prata bolån med oss
Övriga bolånetjänster
Configuration in AEM
- Add a Flex container with a 1-2 or 2-1 layout to the page.
- Insert Shape component in the 1-column inside the Flex container.
- Select the shape style, background color, and text style that match your text.
- Enter your text into the text field.
Shape style
- Speech Bubble
- Circle
- Balloon
Background color
- Swedbank Orange
- Liliac
- Turquoise
Text style
- Large
- Medium
- Small
- (Small and Large)
Text
Enter the text to be displayed in the component here.
