Flex Container
Use the Flex Container to create banners, information text on a background color, or a page hero.
As the name implies, the Flex Container is a container for other components. As an editor, you can change the background color, choose between a few different layout options, and decide whether the image should bleed or not.
Bolånekalkyl – räkna på bolån
- Räkna ut hur mycket du kan låna
- Se vad ditt lån kommer att kosta varje månad
- Räkna på din lånekostnad om räntan ändras
Best practice
Hero – Top of the page
Container layout
1-1 coloumns
Components first column
- Headline
- Rich Text Editor with Bullets and Lead text
- CTA
Components second column
- Image Component
Bolånekalkyl – räkna på bolån
- Räkna ut hur mycket du kan låna
- Se vad ditt lån kommer att kosta varje månad
- Räkna på din lånekostnad om räntan ändras
Puff - middle page
Container layout
1-2 columns
Components first column
- Shape component
Components second column
- Headline
- Rich Text Editor
- CTA
Vill du anmäla konto?
Anmäl konto för elstöd och andra utbetalningar
Genom kontoregistret får du utbetalningar från företag och myndigheter direkt till ditt konto. Det kan vara till exempel utbetalning av lön från din arbetsgivare, barnbidrag från Försäkringskassan eller studiemedel från CSN. Pengarna betalas ut via Swedbanks lön- och utbetalningssystem. Du kan även lösa in din avi som du fått hemskickad.
Highlighting information – middle page
Container layout
Full width
Components in column
- Headline
- Rich Text Editor
Går kortet ut snart? Du får automatiskt ett nytt hemskickat
Om ditt kort håller på att gå ut, skickar vi automatiskt ett nytt kort till din folkbokföringsadress, förutsatt att du har följt kortvillkoren. När du har använt det nya kortet första gången och transaktionen har debiterats, spärrar vi det gamla kortet.
Headline Component
Always use a Headline Component in your Flex Container.
Hi! I'm a Headline Component
Rich Text Editor
Use Rich Text Editor (RTE) for text.
Rich Text Editor
Rich Text Editor Component
Paragraph. Line break.
Paragraph. Line break.
CTA Component
Use a CTA when you want the visitors to take action.
Shape Component
Use this component when you want to put emphasis on something that is not a headline.
This is a Shape!
Image Component
Images and graphics make content more pleasant and easier to understand.
Image Component
Decorative Text Component
Use it when you want to highlight a phrase or quote, but please keep in mind – it's not a proper headline.
This is how decorative text behaves: a few words are highlighted and always appear together.
When building a Flex Container with image and text – one approch is to:
- Start by building it in full width
- Then move it to the split layout
This helps you place the content in the correct columns and avoid unsightly margins.
Do
Good design
The image component is in one column and the Headline and Rich Text Component is in the other column. The margins are fine. Beautiful!
Don't
Bad design
Everything is in the same column so the margins are missing!
Do
- If you want to have text in two columns, you should either use two Flex containers or two Rich Text Editors in a Layout container. Depending on how much you want to highlight the content.
Don't
- Do not place text in both columns in a Flex container with a 1-1 layout style.
There should always be a headline
There should always be a headline and it should be placed inside the Flex Container. Use either:
- Headline Component (activate -12 px)
- Heading in Rich Text Editor
Do
Don't
Headline length
- Long headline? Shorten the headline or replace the Image component with the Shape component. The Layout style should be 2-1 or 1-2, with the Shape component placed in the first section (1).
- Avoid headlines exceeding three lines.
Do
Don't
Do
- Place the image in the top column and the text in the column below.
- Preferably use a Teaser component if there are links.
Don't
- The headline and text should not be positioned above the image.
- Never place an image in the same c-column as the headline and text.
Do
- Flex container Layout: 1-1
- Always with Padding.
Don't
- Never use without padding.
Do
- Guiding graphic and Spots should always be used within a Flex container.
Don't
- They should never be used independently (without a Flex container).
Configuration in AEM
No padding (default)
The image will bleed to the borders of the area in the Flex Container.
Use for
- Images of people
Padding
The padding option should only be used in special cases when the image or design demands it.
Use for
- Credit card images
- Guiding graphic, also known as Spots
Note: No padding applies to everything in the same column as the image. Therefore, never put content in the same column as the image, as this will mess up the margins and break the design.
Flex must have a background color. We have six different background color options.
- Apricot (default)
- Peach
- Sky
- Mist
- Rose
- Thistle
The component has four layout options.
- 1-1 columns (default) - Always use for images
- 2-1 columns - Always use for Shape and place it in 1 column
- 1-2 columns - Always use for Shape and place it in 1 column
- Full width
