• FRI FRAGT OVER DKK 1000
  • AFHENTNING I BUTIKKEN
  • HOLLY KLUBBEN
  • NYHEDER HVER UGE
  • BORGERGADE 17B
  • KURATEREDE SMYKKER

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.

    • Peeppo Kjole
      38 40 42 46
      • New arrival
      Colville
      As low as DKK 7.125,00

      Color: Tobacco/Sand

      Materials: 54% Viscose, 46% Cotton

    • Salt & Pepper Strik
      S M L
      • New arrival
      Colville
      As low as DKK 6.000,00

      The Salt & Pepper jumper has a relaxed fit with extra long, wide sleeves and a high neck.

      Color: Black/Turquoise

      Material: 100% Alpaca Wool

    • Jilly Bean Bukser
      38 40 42 44 46
      • New arrival
      Colville
      As low as DKK 4.875,00

      The Jilly Bean trousers are tailored with a high waist and a leg shape that tappers softly just above the ankles. 

      Color: Dark Navy

      Material: 100% Wool

    • Venice Bukser
      38 40 42 44
      • New arrival
      Colville
      As low as DKK 7.125,00

      Color: Dark Navy

      Materials: 100% Tech Wool


    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.

        • Accordion 1

          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.

        • Accordion 2

          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.

        • Accordion 3

          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.

      2022 © ALLE RETTIGHEDER FORBEHOLDES HOLLY GOLIGHTLY - CVR: 39714167