General
- Please use unilever standards for delivering information to the webmasters https://standards.unileverqa.com/tab/#
- Compontents behave as shown below. If anything needs to be changed the front-end team needs to be asked. This will take time and costs money.
- Styles such as tekst color can be changed with custom CSS. Ask the webmasters for more information
1. Hero Images Component (With Different variations)
The hero banner is a full-width image, which is pulled from the asset bank (TAB). This component can be used to present full-width images anywhere on the page, but is usually positioned at the top below the main header navigation.The hero banner has an optional title, subtitle and Call To Action (CTA) button. There are different banner styles which can be chosen.
1.1 Is with big titles and a CTA button left aligned. Smaller text can also be added. The CTA button can be removed.
1.2 Is with a big title and smaller text including a background image. Tekst color can be changed.
Our brand at a glance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies rhoncus metus eu varius. Cras pellentesque auctor elit eu euismod. Donec pretium ligula condimentum iaculis viverra. Morbi rutrum urna vel maximus condimentum. Fusce lacinia vitae purus a sodales. Phasellus id purus vulputate, aliquam ligula eu, consequat lorem.
1.3 Is with a photo background and a white square. This square is with small text (can be made big) and a CTA button both alligned in the center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet pulvinar dui vitae fermentum.
Button
1.4 Is with big titles and text can be added.
2. Tutorial
Tutorials are two opposite elements that can display information such as a timeline or how to apply a product.
2.1 tutorial step even
Step 2
Apply shadow
Heat treatment is getting more popular everyday. Most of us have our own conceptions about this treatment.
Heat treatment is getting more popular everyday. Most of us have our own conceptions about this treatment.
2.2 tutorial step odd
Step 1
Put on the primer
Heat treatment is getting more popular everyday. Most of us have our own conceptions about this treatment.
3. Product Listing
Products can be chosen to your liking in this carousel. Title can't be changed. There is a four products max.
Populære produkter
( 26 )
Maakt je haar zacht en soepel zonder de hoofdhuid te irriteren. Neutral Shampoo is speciaal ontwikkeld voor de gevoelige huid en verhelpt het probleem van roos.
Extra vettende Neutral Baby Huidolie die verzachtend is voor het zeer droge en gevoelige babyhuidje. Helpt de natuurlijke vetbalans van de huid te herstellen.
Neutral Day Cream is speciaal ontwikkeld voor de gevoelige huid. Zorgt voor een goede hydratatie, waardoor je huid zacht aanvoelt en er stralend uitziet.
Neutral Anti-transparant deodorant is speciaal ontwikkeld voor de gevoelige huid. Zorgt ervoor dat je huid fris aanvoelt en beschermt tegen ongewenste geurtjes.
Neutral wasmiddel is effectief tegen vuil en vlekken en mild van samenstelling om het risico op huidirritatie te verminderen.
Neutral wasmiddel is effectief tegen vuil en vlekken en mild van samenstelling om het risico op huidirritatie te verminderen.
4. Article Asset
The article asset component enables the brand to show a collage of different pictures with titles. (Only below or next to each other). The amount of images you want to use is unlimited.
5. Navigation Tiles
The navigation component creates a display of the different articles that belong to one main article. The amount of articles displayed is per three and as many articles as one wants can be displayed as shown below. The text above can be changed. The images of the links are determined by the thumbnail! Display will show all articles
6. Article Listing
Currently Neutral does not have any articles so Simple is used
The article listing component enables the brand to show articles that are interesting to the displayed article. Or either to display other interesting information. The image and text displayed are directly from the article and can't be changed. What can be changes is the headline. Finally there is a button that links you to all articles. Currently all articles are shown.
TERTIARY HEADER / HEADLINE
Get Ready Fast For Fall Style Tips
8. Featured Content Components (With Different Variations)
Featured content components can be configured in multiple ways.
8.1 video with heading
This component highlights a video by placing a large video in the middle of the page, with a title above it. For the video it is possible to mute audio, auto play and loop it.
Title
8.2 Secondary header
This component displays cards next to eachother including an image a title + button underneath. It is possible to place as many cards as you want. However, the cards become smaller when you add more cards. See the three different components for examples. You can link the buttons to anywhere the brand wants.
8.3 About Icons
The ‘about icons’ component makes it possible to list to content next to each other. This is commonly used to list KPI’s. The most common amount is three, but four or five items is also an option. Please keep in mind that how more items you add, how more the text will pushed in so the text will be longer. With this component it is possible to add images, titles and paragraphs. Only images or only text is also possible.
8.4 What’s in/out section
Similar to the ‘about icons’, but then with a nice grey background and two components next to each other. Here it possible to only display two items.
8.5 Centered Featured Content
Big text with a smaller tekst underneath and a button. Possible to add background image or plain color. Moreover, we can also change the color of the text if needed.
8.6 Single Featured content Article (Picture right alligned)
This component displays and image to one side and text, a title and a button on the other side. It is possible to display the content the other way around too (image left, text right).
Our History
Natural Home Facial for Oily Skin – Despite its disadvantages, oil skin is boon in the long run as wrinkles, lines, etc take time to show up than they would on the dry skin making you look younger than your peers. Though one still has to take proper care for oily skin with the right skin care products.
Read more- Our history.
8.7 Single Featured content Article (Picture left alligned)
This component displays and image to one side and text, a title and a button on the other side. It is possible to display the content the other way around too (image left, text right).
Get the look: Effortless waves
Heat treatment is getting more popular
Read more- Get the look: Effortless waves.
9. Centered Big Title
This component displays Centered big title with subtitle below.
#1 The summer eyes series: Lining and Shading
Heat treatment is getting more popular everyday. Most of us have our own conceptions about this treatment.
10. Contact Us
This component displays Contact us information with different variations.
10.1 Contact us boxes
This component shows contact us information in boxes.
Contact us
We’ll help you find what you’re looking for.
Email Us
Send us an email - we'll get back to you soon.
send an email
Store Locator
Find a retailer near you.
find a store
FAQ
Check our list of frequently asked questions
FIND an ANSWER
10.2 Contact us boxes (Vertical)
This component shows contact us information in boxes vertically.
Contact us
We’ll help you find what you’re looking for.
Email Us
Send us an email - we'll get back to you soon.
send an email
Store Locator
Find a retailer near you.
find a store
Live Agent
Our electronic assistant can answer your FAQs.
ask us
10.3 Contact us without box (Vertical)
This component shows contact us information vertically without box.
Monday-Friday
8:30 AM-6:00 PM Eastern Time
VISIT US
Unilever Danmark
Ørestads Boulevard 73
2300 København S
10.4 Contact us without box
This component shows contact us information without box.
Call us
1-800-555-8888
Monday-Friday
8:30 AM-6:00 PM Eastern Time
Emergency Hotline
1-800-555-8888
This number is available 24 hours
a day/ 7 days a week.
11. Extra elements that can be added to pages
Within this part elements will be displayed which can be used throughout the website such as simple images and texts
11.1 Rich text
This component shows regular text. The scale can be made less wide and placed in the middle through custom css.
<ph/>
11.2 Panel
This component is used to create for instance a Frequently Asked Questions area. Displayed on the following page https://www.neutral.nl/contact/faq.html
11.3 Divider
This component is used to create some extra spacing between different components
11.4 Image
This component displays an image. The image can be scaled to a smaller size and placed in the middle through custom css.
11.5 Image Gallery
This component is used to display multiple image in a carousel like fashion. the amount of images in the carousel are max 6. To keep in mind is that the image scales to the format of the component. As you can see in the image below that is stretched
