Component Style Guide
See what the different components look like on Holly
The component style guide is ment to be a tool to see what can be created and also see that if the style is correct.
Each component available has been added to this page, some on more than one configuration. So some content blocks has more settings to play around with.
Headline
The headline block is styled to fill out the full with of the page, text is centered, and the background color is @color-fog-rose (#E1B6A5)
Headline 1
Subheadline 1
Headline 2
Subheadline 2
Headline 3
Subheadline 3
Headline 4
Subheadline 4
Headline 5
Subheadline 5
Headline 6
Subheadline 6
Button
The button component is simple inserting a button with a link.
Product Carousel
The product carousel has a lot of options for what product to show and how many, but this is a standard view of it.
If the product listing is styled then it should be working correctly and look fine.
Paragraph - Wide with columns
The Paragraph block can be wide og "optimal reading width". When wide, it can be split into multiple columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, elit eget congue luctus, metus nulla porttitor eros, in vulputate diam massa convallis nulla. Donec quis est neque. Pellentesque pretium feugiat consectetur. Morbi tempus placerat neque a lacinia. Suspendisse rutrum dui nec elementum finibus. Vestibulum iaculis justo ut scelerisque iaculis. Ut laoreet, libero a eleifend auctor, eros metus lacinia sapien, ac ultricies metus neque at tortor. In at congue augue, mattis scelerisque neque. Curabitur dui nulla, tincidunt at eleifend luctus, pellentesque a massa. Proin vitae ex sodales, aliquam urna non, finibus felis. Aliquam vel sem ultrices, volutpat nisi vel, maximus nunc. Ut volutpat laoreet risus at suscipit. Nulla facilisis, risus sed sollicitudin sodales, nulla augue tristique libero, non aliquet tellus magna non dui. Aenean finibus a felis pretium tincidunt. Etiam est lacus, egestas eget eleifend sed, accumsan efficitur felis. Aenean faucibus auctor facilisis.
Nunc placerat vestibulum justo. Morbi non accumsan est. Integer turpis lectus, ornare et enim ut, vulputate ultrices dolor. Proin porttitor justo vel erat accumsan tincidunt. Phasellus vehicula metus sed lacinia feugiat. Morbi non vestibulum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus imperdiet eros sit amet tincidunt. Sed viverra sollicitudin tincidunt. Nulla volutpat suscipit magna et euismod. Suspendisse leo tortor, laoreet vitae sapien eu, fringilla blandit lorem. Nam sollicitudin, ipsum non dictum venenatis, lacus tellus dictum nisi, non efficitur erat nibh mollis ante. Aenean mi enim, ultrices at dapibus nec, consectetur eget massa.
In et dictum justo, vitae sagittis diam. Maecenas consequat quis urna vel pellentesque. Nulla ac sagittis tellus, vitae ultrices augue. Nullam vulputate egestas ligula, sed aliquet justo laoreet eget. Quisque at lectus ut est scelerisque tincidunt non in mauris. Quisque viverra nisl in augue efficitur imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non dictum nibh, ut molestie odio. Aliquam posuere a eros sed laoreet. Sed sit amet finibus velit. Proin nisi justo, condimentum eu tortor ac, scelerisque pretium neque. Praesent luctus nulla eu blandit condimentum. In dapibus ornare ipsum, vel convallis arcu finibus in.
Sed convallis bibendum vulputate. Integer consectetur ornare libero, sed ultricies augue rutrum nec. Aenean tristique pulvinar mauris sit amet cursus. Nullam auctor eget urna id sagittis. Sed pellentesque neque justo, ut ultrices nulla molestie condimentum. Proin rhoncus erat quam. Pellentesque at erat scelerisque risus condimentum ultricies. Suspendisse potenti.
Paragraph - Optimal reading width
The Paragraph block can be wide og "optimal reading width". When optimal reading with is selected, columns cant be used, and the text will be shown in the middle in a narrow container.
Width would nomally be between 600-800px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, elit eget congue luctus, metus nulla porttitor eros, in vulputate diam massa convallis nulla. Donec quis est neque. Pellentesque pretium feugiat consectetur. Morbi tempus placerat neque a lacinia. Suspendisse rutrum dui nec elementum finibus. Vestibulum iaculis justo ut scelerisque iaculis. Ut laoreet, libero a eleifend auctor, eros metus lacinia sapien, ac ultricies metus neque at tortor. In at congue augue, mattis scelerisque neque. Curabitur dui nulla, tincidunt at eleifend luctus, pellentesque a massa. Proin vitae ex sodales, aliquam urna non, finibus felis. Aliquam vel sem ultrices, volutpat nisi vel, maximus nunc. Ut volutpat laoreet risus at suscipit. Nulla facilisis, risus sed sollicitudin sodales, nulla augue tristique libero, non aliquet tellus magna non dui. Aenean finibus a felis pretium tincidunt. Etiam est lacus, egestas eget eleifend sed, accumsan efficitur felis. Aenean faucibus auctor facilisis.
Nunc placerat vestibulum justo. Morbi non accumsan est. Integer turpis lectus, ornare et enim ut, vulputate ultrices dolor. Proin porttitor justo vel erat accumsan tincidunt. Phasellus vehicula metus sed lacinia feugiat. Morbi non vestibulum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus imperdiet eros sit amet tincidunt. Sed viverra sollicitudin tincidunt. Nulla volutpat suscipit magna et euismod. Suspendisse leo tortor, laoreet vitae sapien eu, fringilla blandit lorem. Nam sollicitudin, ipsum non dictum venenatis, lacus tellus dictum nisi, non efficitur erat nibh mollis ante. Aenean mi enim, ultrices at dapibus nec, consectetur eget massa.
In et dictum justo, vitae sagittis diam. Maecenas consequat quis urna vel pellentesque. Nulla ac sagittis tellus, vitae ultrices augue. Nullam vulputate egestas ligula, sed aliquet justo laoreet eget. Quisque at lectus ut est scelerisque tincidunt non in mauris. Quisque viverra nisl in augue efficitur imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non dictum nibh, ut molestie odio. Aliquam posuere a eros sed laoreet. Sed sit amet finibus velit. Proin nisi justo, condimentum eu tortor ac, scelerisque pretium neque. Praesent luctus nulla eu blandit condimentum. In dapibus ornare ipsum, vel convallis arcu finibus in.
Sed convallis bibendum vulputate. Integer consectetur ornare libero, sed ultricies augue rutrum nec. Aenean tristique pulvinar mauris sit amet cursus. Nullam auctor eget urna id sagittis. Sed pellentesque neque justo, ut ultrices nulla molestie condimentum. Proin rhoncus erat quam. Pellentesque at erat scelerisque risus condimentum ultricies. Suspendisse potenti.
Static block
The static block is the unicorn, because you can use it to add what ever content you want from outside these components.
What ever you can fit inside a static block ( Content > Blocks ) you can fit in here.
Its also this way that you can combine the power of Magento's own page builder and MageSuites components
Here is have set up a newsletter sign up in a static block, via templates and page builder classes.
Hero Carousel
The hero carousel is a slider setup, and you have all kind of options to put text on top, with overlay and other options.
Play around with it.
Image Teaser Legacy
As the name says, this block is legacy, so you should just use the one only called Image Teaser, its more smart.
Category Links
This block is a for showing a group of categories, you choose a parent category and then you can select which subcategories you want shown.
There is other options as well, like "show products count"
Brand Carousel
Brand carousel is created via the brand management.
Doesnt show much at the moment.
Products grid
Simple block to show a grid of products. There is different settings to play around with.
-
- New arrival
SeafarerAs low as DKK 2.800,00Seafarer Maglia Clarissa Rib Bluse i farven Navy er en klassisk langærmet top lavet i en varm og luksuriøs ribbet uldkvalitet. Blusen er designet med rund tætsiddende hals, lange ærmer med elastikafslutning og stolpeknaplukning på front.
Farve: Navy
Materiale: 100% Lanauld
Vælg din normale størrelse
-
- New arrival
SeafarerAs low as DKK 2.800,00Seafarer Maglia Clarissa Rib Bluse i farven Cream er en klassisk langærmet top lavet i en varm og luksuriøs ribbet uldkvalitet. Blusen er designet med rund tætsiddende hals, lange ærmer med elastikafslutning og stolpeknaplukning på front.
Farve: Nude
Materiale: 100% Lanauld
Vælg din normale størrelse
-
- New arrival
Pierre-Louis MasciaAs low as DKK 3.900,00Pierre-Louis Mascia Giacca Jakke i farven Grey med multifarvet pritndesign er lavet med elegante silhouette og unikt udtryk. Jakken er designet med almindelig pasform, mandarinkrave, knaplukning på front og en lille sidelomme forneden på front med kuvertlukning.
Farve: Multifarvet print
Materiale: 100% bomuld
Vælg din normale størrelse
-
- New arrival
Pierre-Louis MasciaAs low as DKK 2.900,00Pierre Louis-Mascia Pantaloni Bukser i farven Grey med multifarvet printdesign er et par unikke bukser produceret i Italian og lavet i en blød og luksuriøs bomuldkvalitet. Bukserne er designet med løs pasform og straight silhouette samt elastisk taljebånd med knap- og lynlåslukning.
Farve: Multifarvet print
Materiale: 100% bomuld
Vælg din normale størrelse
CMS Pages Teaser
CMS page teaser is showing links to cms page, which is selected from a tag or other settings.
Product Finder
Not sure what this is all about :)
Custom HTML
This block is for custom HTML, so you can insert what you would like :)
Custom html
Daily Deal Teaser
Not sure how this is working
Image Teaser
This is the new image teaser block, many settings and options
Icon
Icon block can be used to show a list of small items.
Teaser and text
The name says it all, option to display a teaser and text.
Mosaic
Mosaic gives you the option to show two images, one wide and one narrow. Its possible to do overlay and link.
This is good option to show content in a interesting way, just like below.
Accordion
Accordions is for showing a row of questions and answers.
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, elit eget congue luctus, metus nulla porttitor eros, in vulputate diam massa convallis nulla. Donec quis est neque. Pellentesque pretium feugiat consectetur. Morbi tempus placerat neque a lacinia. Suspendisse rutrum dui nec elementum finibus. Vestibulum iaculis justo ut scelerisque iaculis. Ut laoreet, libero a eleifend auctor, eros metus lacinia sapien, ac ultricies metus neque at tortor. In at congue augue, mattis scelerisque neque. Curabitur dui nulla, tincidunt at eleifend luctus, pellentesque a massa. Proin vitae ex sodales, aliquam urna non, finibus felis. Aliquam vel sem ultrices, volutpat nisi vel, maximus nunc. Ut volutpat laoreet risus at suscipit. Nulla facilisis, risus sed sollicitudin sodales, nulla augue tristique libero, non aliquet tellus magna non dui. Aenean finibus a felis pretium tincidunt. Etiam est lacus, egestas eget eleifend sed, accumsan efficitur felis. Aenean faucibus auctor facilisis.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, elit eget congue luctus, metus nulla porttitor eros, in vulputate diam massa convallis nulla. Donec quis est neque. Pellentesque pretium feugiat consectetur. Morbi tempus placerat neque a lacinia. Suspendisse rutrum dui nec elementum finibus. Vestibulum iaculis justo ut scelerisque iaculis. Ut laoreet, libero a eleifend auctor, eros metus lacinia sapien, ac ultricies metus neque at tortor. In at congue augue, mattis scelerisque neque. Curabitur dui nulla, tincidunt at eleifend luctus, pellentesque a massa. Proin vitae ex sodales, aliquam urna non, finibus felis. Aliquam vel sem ultrices, volutpat nisi vel, maximus nunc. Ut volutpat laoreet risus at suscipit. Nulla facilisis, risus sed sollicitudin sodales, nulla augue tristique libero, non aliquet tellus magna non dui. Aenean finibus a felis pretium tincidunt. Etiam est lacus, egestas eget eleifend sed, accumsan efficitur felis. Aenean faucibus auctor facilisis.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, elit eget congue luctus, metus nulla porttitor eros, in vulputate diam massa convallis nulla. Donec quis est neque. Pellentesque pretium feugiat consectetur. Morbi tempus placerat neque a lacinia. Suspendisse rutrum dui nec elementum finibus. Vestibulum iaculis justo ut scelerisque iaculis. Ut laoreet, libero a eleifend auctor, eros metus lacinia sapien, ac ultricies metus neque at tortor. In at congue augue, mattis scelerisque neque. Curabitur dui nulla, tincidunt at eleifend luctus, pellentesque a massa. Proin vitae ex sodales, aliquam urna non, finibus felis. Aliquam vel sem ultrices, volutpat nisi vel, maximus nunc. Ut volutpat laoreet risus at suscipit. Nulla facilisis, risus sed sollicitudin sodales, nulla augue tristique libero, non aliquet tellus magna non dui. Aenean finibus a felis pretium tincidunt. Etiam est lacus, egestas eget eleifend sed, accumsan efficitur felis. Aenean faucibus auctor facilisis.
-
Product Teaser
Product teaser should display a product, but not shows at the moment, there is probably a good explanation for it.