[Szablon] Elementy Argento

<section class="jumbotron"> <div class="container"> <div class="hero a-center"> <h1 class="block-title">Argento Elements</h1> <p class="subtitle a-center">We created the Elements Page to get managing your Magento 2 store simple. The page makes it easier to create content. The page includes ready-to-use widgets and HTML snippets with predefined styles. Adding and configuring the mentioned blocks doesn't require any programming skills. Now you can simply implement them in various places on your website. The benefit of using the information of Elements Page is that the same block or widget can be reused on multiple pages. That saves you lots of time when creating and updating content.</p> </div> <div class="contents"> <ol> <li><a href="#block-with-image-on-left" title="Block with Image on Left">Block with Image on Left</a></li> <li><a href="#block-with-image-on-right" title="Block with Image on Right">Block with Image on Right</a></li> <li><a href="#divider-with-background-and-title" title="Divider with Background and Title">Divider with Background and Title</a></li> <li><a href="#text-blocks-with-small-icons" title="Text Blocks with Small Icons">Text Blocks with Small Icons</a></li> <li><a href="#text-blocks-with-big-icons" title="Text Blocks with Big Icons">Text Blocks with Big Icons</a></li> <li><a href="#text-blocks-with-icons-on-top" title="Text Blocks with Icons on Top">Text Blocks with Icons on Top</a></li> <li><a href="#logos-slider" title="Logos Slider">Logos Slider</a></li> <li><a href="#product-with-short-information" title="Product with Short Information">Product with Short Information</a></li> <li><a href="#products-grid" title="Products Grid">Products Grid</a></li> <li><a href="#products-slider" title="Products Slider">Products Slider</a></li> <li><a href="#blocks-with-person-bio" title="Blocks with Person Bio">Blocks with Person Bio</a></li> <li><a href="#pricing-block" title="Pricing Block">Pricing Block</a></li> <li><a href="#image-gallery" title="Image Gallery">Image Gallery</a></li> <li><a href="#latest-news" title="Latest News">Latest News</a></li> <li><a href="#testimonials" title="Testimonials">Testimonials</a></li> <li><a href="#single-testimonial" title="Single Testimonial">Single Testimonial</a></li> </ol> </div> </div> </section> <section class="jumbotron" id="block-with-image-on-left"> <div class="container"> <div class="title"> <h3>Block with Image on Left</h3> <p class="subtitle">You can use the blocks as a navigational tool. They include links to popular content of your store. Both images and a brief introduction present whatever you believe your visitors will find valuable.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="image-block left element"> <div class="info"> <p class="label">New</p> <h2 class="heading">Adventure Starts Now</h2> <p class="text"> In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique. </p> <a href="" class="action primary"> <span>Shop Now</span> </a> </div> <div class="picture"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/banner-image-left.png" alt="" /> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"image-block left element"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"label"</span><span style="color: #008000; font-weight: bold">></span>New<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"><h2</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"heading"</span><span style="color: #008000; font-weight: bold">></span>Adventure Starts Now<span style="color: #008000; font-weight: bold"></h2></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span> In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique. <span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"action primary"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span></span>Shop Now<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"picture"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/banner-image-left.png&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="block-with-image-on-right"> <div class="container"> <div class="title"> <h3>Block with Image on Right</h3> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element image-block right"> <div class="info"> <p class="label">New</p> <h2 class="heading">Adventure Starts Now</h2> <p class="text"> In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique. </p> <a href="" class="action primary"> <span>Shop Now</span> </a> </div> <div class="picture"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/banner-image-right.png" alt="" /> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element image-block right"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"label"</span><span style="color: #008000; font-weight: bold">></span>New<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"><h2</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"heading"</span><span style="color: #008000; font-weight: bold">></span>Adventure Starts Now<span style="color: #008000; font-weight: bold"></h2></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span> In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Integer et elit eget elit facilisis tristique. <span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"action primary"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span></span>Shop Now<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"picture"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/banner-image-right.png&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="divider-with-background-and-title"> <div class="container"> <div class="title"> <h3>Divider with Background and Title</h3> <p class="subtitle">With the block code, you can add the dividers as section background images. The dividers bring a little originality to a web page. Plus, the image can present links to the important content of your store.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> </div> <div class="element background-divider a-center"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/nike-collection.png" alt="Nike Collection" /> <div class="content"> <div class="block-title"> <strong role="heading" aria-level="3">New Nike Collection</strong> <p class="subtitle">Three-piece toe construction for classic tennis support and performance.</p> </div> <a href="https://panwoda.pl/" title="Shop Now" class="action primary"><span>Shop Now</span></a> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element background-divider a-center"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url='wysiwyg/elements/argento/force/nike-collection.png'}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">"Nike Collection"</span> <span style="color: #008000; font-weight: bold">/></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"content"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-title"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><strong</span> <span style="color: #7D9029">role=</span><span style="color: #BA2121">"heading"</span> <span style="color: #7D9029">aria-level=</span><span style="color: #BA2121">"3"</span><span style="color: #008000; font-weight: bold">></span>New Nike Collection<span style="color: #008000; font-weight: bold"></strong></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"subtitle"</span><span style="color: #008000; font-weight: bold">></span>Three-piece toe construction for classic tennis support and performance.<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"{{store direct_url=''}}"</span> <span style="color: #7D9029">title=</span><span style="color: #BA2121">"Shop Now"</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"action primary"</span><span style="color: #008000; font-weight: bold">><span></span>Shop Now<span style="color: #008000; font-weight: bold"></span></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="text-blocks-with-small-icons"> <div class="container"> <div class="title"> <h3>Text Blocks with Small Icons</h3> <p class="subtitle">The blocks have an informative role to play. A piece of important content along with memorable icons will help you to communicate with your customers who speak multiple languages. The blocks with icons compact information into one easily recognizable symbol. Within a text block, you can add custom-designed icons too.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element icon-text-small"> <div class="description"> <h2 class="heading argento-force-title"><strong role="heading" aria-level="3">Stylish interiors for everyone</strong></h2> <p class="text">In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique.</p> </div> <div class="icons"> <div class="item"> <div class="icon"><img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/icons/icon-check.svg" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon"><img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/icons/icon-location.svg" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon"><img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/icons/icon-heart.svg" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon"><img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/icons/icon-tags.svg" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon"><img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/icons/icon-money.svg" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> <div class="item"> <div class="icon"><img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/icons/icon-sale.svg" alt="" /></div> <div class="info"> <h4 class="title">Donec rutrum congue</h4> <div class="text">Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. </div> </div> </div> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element icon-text-small"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"description"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h2</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"heading argento-force-title"</span><span style="color: #008000; font-weight: bold">><strong</span> <span style="color: #7D9029">role=</span><span style="color: #BA2121">"heading"</span> <span style="color: #7D9029">aria-level=</span><span style="color: #BA2121">"3"</span><span style="color: #008000; font-weight: bold">></span>Stylish interiors for everyone<span style="color: #008000; font-weight: bold"></strong></h2></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique.<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icons"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-check.svg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-location.svg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-heart.svg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-tags.svg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-money.svg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/icons/icon-sale.svg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #008000; font-weight: bold">/></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="text-blocks-with-big-icons"> <div class="container"> <div class="title"> <h3>Text Blocks with Big Icons</h3> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element icon-text-big"> <div class="item"> <div class="icon"><i class="force-icon force-icon-bigger force-shield"></i></div> <div class="info"> <h3 class="title">Secure Payments</h3> <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div> </div> </div> <div class="item"> <div class="icon"><i class="force-icon force-icon-bigger force-100percent"></i></div> <div class="info"> <h3 class="title">Money Back</h3> <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div> </div> </div> <div class="item"> <div class="icon"><i class="force-icon force-icon-bigger force-delivery"></i></div> <div class="info"> <h3 class="title">Fast Delivery</h3> <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div> </div> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element icon-text-big"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><i</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"force-icon force-icon-bigger force-shield"</span><span style="color: #008000; font-weight: bold">></i></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h3</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Secure Payments<span style="color: #008000; font-weight: bold"></h3></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><i</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"force-icon force-icon-bigger force-100percent"</span><span style="color: #008000; font-weight: bold">></i></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h3</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Money Back<span style="color: #008000; font-weight: bold"></h3></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><i</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"force-icon force-icon-bigger force-delivery"</span><span style="color: #008000; font-weight: bold">></i></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h3</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Fast Delivery<span style="color: #008000; font-weight: bold"></h3></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron hero" id='text-blocks-with-icons-on-top'> <div class="container"> <div class="title"> <h3>Text Blocks with Icons on Top</h3> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="element icon-text-top"> <div class="block-title"> <strong role="heading" aria-level="2">Explore our store</strong> </div> <div class="content"> <div class="item"> <div class="icon"><i class="force-icon force-icon-bigger force-shield"></i></div> <div class="info"> <h3 class="title">Secure Payments</h3> <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div> </div> </div> <div class="item"> <div class="icon"><i class="force-icon force-icon-bigger force-100percent"></i></div> <div class="info"> <h3 class="title">Money Back</h3> <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div> </div> </div> <div class="item"> <div class="icon"><i class="force-icon force-icon-bigger force-delivery"></i></div> <div class="info"> <h3 class="title">Fast Delivery</h3> <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div> </div> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element icon-text-top"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-title"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><strong</span> <span style="color: #7D9029">role=</span><span style="color: #BA2121">"heading"</span> <span style="color: #7D9029">aria-level=</span><span style="color: #BA2121">"2"</span><span style="color: #008000; font-weight: bold">></span>Explore our store<span style="color: #008000; font-weight: bold"></strong></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"content"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><i</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"force-icon force-icon-bigger force-shield"</span><span style="color: #008000; font-weight: bold">></i></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h3</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Secure Payments<span style="color: #008000; font-weight: bold"></h3></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><i</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"force-icon force-icon-bigger force-100percent"</span><span style="color: #008000; font-weight: bold">></i></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h3</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Money Back<span style="color: #008000; font-weight: bold"></h3></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"icon"</span><span style="color: #008000; font-weight: bold">><i</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"force-icon force-icon-bigger force-delivery"</span><span style="color: #008000; font-weight: bold">></i></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h3</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Fast Delivery<span style="color: #008000; font-weight: bold"></h3></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"text"</span><span style="color: #008000; font-weight: bold">></span>Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id='logos-slider'> <div class="container"> <div class="title"> <h3>Logos Slider</h3> <p class="subtitle">The Logos Slider is perfect for displaying a list of brands available in your store. You can also use it to show your partner or client logos. With the block code, you can add your slider to your site quickly and easily. Made using <a href="https://docs.swissuplabs.com/m2/extensions/easyslider/" title="Easy Slider">Easy Slider</a> module widget.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="block block-carousel element brands-slider"> <div class="block-title argento-force-title"> <strong role="heading" aria-level="3">Brands</strong> </div> <div class="block-content">

</div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block block-carousel element brands-slider"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-title argento-force-title"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><strong</span> <span style="color: #7D9029">role=</span><span style="color: #BA2121">"heading"</span> <span style="color: #7D9029">aria-level=</span><span style="color: #BA2121">"3"</span><span style="color: #008000; font-weight: bold">></span>Brands<span style="color: #008000; font-weight: bold"></strong></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-content"</span><span style="color: #008000; font-weight: bold">></span> {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_force_brands"}} <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id='product-with-short-information'> <div class="container"> <div class="title"> <h3>Product with Short Information</h3> <p class="subtitle">The block/widget enables you to display a short description of the product on a category, other product listing pages, and product page. Using block/widget you will easily show the main information of your product briefly to arouse interest. Built with <a href="https://docs.swissuplabs.com/m2/extensions/highlight/widgets/#highlight-widgets" title="Highlight">Highlight</a> module widget.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element product-info"> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element product-info"</span><span style="color: #008000; font-weight: bold">></span>{{widget type="Swissup\Highlight\Block\ProductList\All" title="" carousel="0" products_count="1" column_count="1" page_count="1" order="default" dir="asc" template="Swissup_Highlight::product/list.phtml" mode="list" show_page_link="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0"}}<span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id='products-grid'> <div class="container"> <div class="title"> <h3>Products Grid</h3> <p class="subtitle">The block displays products in a product grid. It shows 4 products per row on the desktop and 2 per row on mobile. You can select a list of products manually. You can expand the grid with columns, custom text, labels. Built with <a href="https://docs.swissuplabs.com/m2/extensions/highlight/widgets/#highlight-widgets" title="Highlight">Highlight</a> module widget.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element products-grid hero"> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element products-grid hero"</span><span style="color: #008000; font-weight: bold">></span>{{widget type="Swissup\Highlight\Block\ProductList\All" title="Explore our store" carousel="0" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" show_page_link="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0"}}<span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id='products-slider'> <div class="container"> <div class="title"> <h3>Products Slider</h3> <p class="subtitle">The widget allows you to show the attractive product slider on your site. You can add a carousel to posts, pages, sidebars. This is a great way to showcase your products and increase conversions. Built with <a href="https://docs.swissuplabs.com/m2/extensions/highlight/widgets/settings/#block-rendering-settings" title="Highlight">Highlight</a> module widget with ajax carousel enabled.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element products-slider hero"> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element products-slider hero"</span><span style="color: #008000; font-weight: bold">></span>{{widget type="Swissup\Highlight\Block\ProductList\All" title="Related products" carousel="1" products_count="4" column_count="4" page_count="2" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" show_page_link="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0"}}<span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="blocks-with-person-bio"> <div class="container"> <div class="title"> <h3>Blocks with Person Bio</h3> <p class="subtitle">This block is an excellent solution to display the personal BIO of your team members. The block includes a profile image, title, and biography.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element bio"> <div class="item"> <div class="wrapper"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/bio-1.png" alt="" class="image"> <h4 class="title">Owen Hill</h4> <span class="subtitle">Head Designer</span> <p class="info">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig</p> </div> </div> <div class="item"> <div class="wrapper"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/bio-2.png" alt="" class="image"> <h4 class="title">Angie Smith</h4> <span class="subtitle">Head Designer</span> <p class="info">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig</p> </div> </div> <div class="item"> <div class="wrapper"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/bio-3.png" alt="" class="image"> <h4 class="title">Alice Richardson</h4> <span class="subtitle">Head Designer</span> <p class="info">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig</p> </div> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element bio"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"wrapper"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url='wysiwyg/elements/argento/force/bio-1.png'}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"image"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Owen Hill<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"subtitle"</span><span style="color: #008000; font-weight: bold">></span>Head Designer<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"wrapper"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url='wysiwyg/elements/argento/force/bio-2.png'}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"image"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Angie Smith<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"subtitle"</span><span style="color: #008000; font-weight: bold">></span>Head Designer<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"wrapper"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url='wysiwyg/elements/argento/force/bio-3.png'}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"image"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><h4</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Alice Richardson<span style="color: #008000; font-weight: bold"></h4></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"subtitle"</span><span style="color: #008000; font-weight: bold">></span>Head Designer<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"><p</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info"</span><span style="color: #008000; font-weight: bold">></span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet lig<span style="color: #008000; font-weight: bold"></p></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron element" id="pricing-block"> <div class="container"> <div class="title"> <h3>Pricing Block</h3> <p class="subtitle">With the block, you can add your own custom pricing table block. It shows the price range with combinations of different prices. It shows a list of services or products included in the pricing package. You have only to choose a location where you want to add the block.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element pricing"> <div class="block-content"> <div class="price-block"> <div class="info-top"> <span class="title">Starter Plan</span> </div> <div class="info-bottom"> <div class="price"><strong class="amount">$40</strong><span class="period">/month</span></div> <ul class="conditions"> <li class="item"><strong>1</strong> Complete product</li> <li class="item"><strong>1</strong> year of support</li> <li class="item"><strong>1</strong> Dedicated server</li> <li class="item"><strong>10</strong> Research demo</li> <li class="item"><strong>20</strong> users</li> </ul> <a href="" class="action primary"><span>Get Started</span></a> </div> </div> <div class="price-block popular"> <div class="info-top"> <span class="title">Business Plan</span> </div> <div class="info-bottom"> <div class="price"><strong class="amount">$60</strong><span class="period">/month</span></div> <ul class="conditions"> <li class="item"><strong>1</strong> Complete product</li> <li class="item"><strong>1</strong> year of support</li> <li class="item"><strong>1</strong> Dedicated server</li> <li class="item"><strong>10</strong> Research demo</li> <li class="item"><strong>20</strong> users</li> </ul> <a href="" class="action primary"><span>Get Started</span></a> </div> </div> <div class="price-block"> <div class="info-top"> <span class="title">Enterprise Plan</span> </div> <div class="info-bottom"> <div class="price"><strong class="amount">$80</strong><span class="period">/month</span></div> <ul class="conditions"> <li class="item"><strong>1</strong> Complete product</li> <li class="item"><strong>1</strong> year of support</li> <li class="item"><strong>1</strong> Dedicated server</li> <li class="item"><strong>10</strong> Research demo</li> <li class="item"><strong>20</strong> users</li> </ul> <a href="" class="action primary"><span>Get Started</span></a> </div> </div> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element pricing"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-content"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"price-block"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info-top"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Starter Plan<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info-bottom"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"price"</span><span style="color: #008000; font-weight: bold">><strong</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"amount"</span><span style="color: #008000; font-weight: bold">></span>$40<span style="color: #008000; font-weight: bold"></strong><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"period"</span><span style="color: #008000; font-weight: bold">></span>/month<span style="color: #008000; font-weight: bold"></span></div></span> <span style="color: #008000; font-weight: bold"><ul</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"conditions"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> Complete product<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> year of support<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> Dedicated server<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>10<span style="color: #008000; font-weight: bold"></strong></span> Research demo<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>20<span style="color: #008000; font-weight: bold"></strong></span> users<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"></ul></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"action primary"</span><span style="color: #008000; font-weight: bold">><span></span>Get Started<span style="color: #008000; font-weight: bold"></span></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"price-block popular"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info-top"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Business Plan<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info-bottom"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"price"</span><span style="color: #008000; font-weight: bold">><strong</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"amount"</span><span style="color: #008000; font-weight: bold">></span>$60<span style="color: #008000; font-weight: bold"></strong><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"period"</span><span style="color: #008000; font-weight: bold">></span>/month<span style="color: #008000; font-weight: bold"></span></div></span> <span style="color: #008000; font-weight: bold"><ul</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"conditions"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> Complete product<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> year of support<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> Dedicated server<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>10<span style="color: #008000; font-weight: bold"></strong></span> Research demo<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>20<span style="color: #008000; font-weight: bold"></strong></span> users<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"></ul></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"action primary"</span><span style="color: #008000; font-weight: bold">><span></span>Get Started<span style="color: #008000; font-weight: bold"></span></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"price-block"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info-top"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"title"</span><span style="color: #008000; font-weight: bold">></span>Enterprise Plan<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"info-bottom"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"price"</span><span style="color: #008000; font-weight: bold">><strong</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"amount"</span><span style="color: #008000; font-weight: bold">></span>$80<span style="color: #008000; font-weight: bold"></strong><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"period"</span><span style="color: #008000; font-weight: bold">></span>/month<span style="color: #008000; font-weight: bold"></span></div></span> <span style="color: #008000; font-weight: bold"><ul</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"conditions"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> Complete product<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> year of support<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>1<span style="color: #008000; font-weight: bold"></strong></span> Dedicated server<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>10<span style="color: #008000; font-weight: bold"></strong></span> Research demo<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">><strong></span>20<span style="color: #008000; font-weight: bold"></strong></span> users<span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"></ul></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">""</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"action primary"</span><span style="color: #008000; font-weight: bold">><span></span>Get Started<span style="color: #008000; font-weight: bold"></span></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="image-gallery"> <div class="container"> <div class="title"> <h3>Image Gallery</h3> <p class="subtitle">The Image Gallery block allows you to easily add an image gallery. It can be an image only or an image with the link. That will lead customers to the important pages of your store. The element is made using <a href="https://docs.swissuplabs.com/m2/extensions/lightboxpro/widget/" title="Lightbox Pro">Lightbox Pro</a> module widget with masonry grid gallery layout.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element gallery hero"> <div class="block-title"> <strong role="heading" aria-level="2">Gallery</strong> </div> <div class="content"> </div> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element gallery hero"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-title"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><strong</span> <span style="color: #7D9029">role=</span><span style="color: #BA2121">"heading"</span> <span style="color: #7D9029">aria-level=</span><span style="color: #BA2121">"2"</span><span style="color: #008000; font-weight: bold">></span>Gallery<span style="color: #008000; font-weight: bold"></strong></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"content"</span><span style="color: #008000; font-weight: bold">></span> {{widget type="Swissup\Lightboxpro\Block\Widgets\Gallery" template="widget/masonry.phtml" img_width="600" img_height="auto" thumb_width="80" thumb_height="100" gallery="file=argento/force/1.jpg<span style="color: #999999; font-weight: bold">&amp;</span>position=0<span style="color: #999999; font-weight: bold">&amp;</span>label=Fitness+training;file=argento/force/2.jpg<span style="color: #999999; font-weight: bold">&amp;</span>position=1<span style="color: #999999; font-weight: bold">&amp;</span>label=Desert+bike;file=argento/force/3.jpg<span style="color: #999999; font-weight: bold">&amp;</span>position=2<span style="color: #999999; font-weight: bold">&amp;</span>label=Basketball;file=argento/force/4.jpg<span style="color: #999999; font-weight: bold">&amp;</span>position=3<span style="color: #999999; font-weight: bold">&amp;</span>label=Swimming;file=argento/force/5.jpg<span style="color: #999999; font-weight: bold">&amp;</span>position=4<span style="color: #999999; font-weight: bold">&amp;</span>label=Power+lifting;file=argento/force/6.jpg<span style="color: #999999; font-weight: bold">&amp;</span>position=5<span style="color: #999999; font-weight: bold">&amp;</span>label=Cycling+Marathon"}} <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="latest-news"> <div class="container"> <div class="title"> <h3>Latest News</h3> <p class="subtitle">The Latest News block helps you to show recent posts from a blog, top trending news, videos, and stories. By default, the block displays 2 news items.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="element news hero"> <div class="block-title"> <strong role="heading" aria-level="2">Latest news</strong> </div> <div class="content"> <ol class="post-list"> <li class="item"> <div class="post-image"> <a href="#" title="News post"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/news1.jpg" alt="Post Link"> </a> </div> <div class="post-content"> <span class="post-tag">Trends</span> <h2><a href="#" title="New Collection">New Collection</a></h2> <div class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae</div> <a href="#" class="read-more-link">Read more</a> </div> </li> <li class="item"> <div class="post-image"> <a href="#" title="News post"> <img src="https://panwoda.pl/media/wysiwyg/elements/argento/force/news2.jpg" alt="Post Link"> </a> </div> <div class="post-content"> <span class="post-tag">Trends</span> <h2><a href="#" title="New Collection">New Collection</a></h2> <div class="short-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae</div> <a href="#" class="read-more-link">Read more</a> </div> </li> </ol> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element news hero"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"block-title"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><strong</span> <span style="color: #7D9029">role=</span><span style="color: #BA2121">"heading"</span> <span style="color: #7D9029">aria-level=</span><span style="color: #BA2121">"2"</span><span style="color: #008000; font-weight: bold">></span>Latest news<span style="color: #008000; font-weight: bold"></strong></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"content"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><ol</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-list"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-image"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"#"</span> <span style="color: #7D9029">title=</span><span style="color: #BA2121">"News post"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/news1.jpg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">"Post Link"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-content"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-tag"</span><span style="color: #008000; font-weight: bold">></span>Trends<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"><h2><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"#"</span> <span style="color: #7D9029">title=</span><span style="color: #BA2121">"New Collection"</span><span style="color: #008000; font-weight: bold">></span>New Collection<span style="color: #008000; font-weight: bold"></a></h2></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"short-description"</span><span style="color: #008000; font-weight: bold">></span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"#"</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"read-more-link"</span><span style="color: #008000; font-weight: bold">></span>Read more<span style="color: #008000; font-weight: bold"></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"><li</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"item"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-image"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"#"</span> <span style="color: #7D9029">title=</span><span style="color: #BA2121">"News post"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><img</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">"{{media url=&quot;wysiwyg/elements/argento/force/news2.jpg&quot;}}"</span> <span style="color: #7D9029">alt=</span><span style="color: #BA2121">"Post Link"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-content"</span><span style="color: #008000; font-weight: bold">></span> <span style="color: #008000; font-weight: bold"><span</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"post-tag"</span><span style="color: #008000; font-weight: bold">></span>Trends<span style="color: #008000; font-weight: bold"></span></span> <span style="color: #008000; font-weight: bold"><h2><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"#"</span> <span style="color: #7D9029">title=</span><span style="color: #BA2121">"New Collection"</span><span style="color: #008000; font-weight: bold">></span>New Collection<span style="color: #008000; font-weight: bold"></a></h2></span> <span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"short-description"</span><span style="color: #008000; font-weight: bold">></span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet temporibus laborum id saepe esse repudiandae<span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"><a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">"#"</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"read-more-link"</span><span style="color: #008000; font-weight: bold">></span>Read more<span style="color: #008000; font-weight: bold"></a></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></li></span> <span style="color: #008000; font-weight: bold"></ol></span> <span style="color: #008000; font-weight: bold"></div></span> <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="testimonials"> <div class="container"> <div class="title"> <h3>Testimonials</h3> <p class="subtitle">The <a href="https://docs.swissuplabs.com/m2/extensions/testimonials/widgets/" title="Testimonials widgets manual">Testimonials widget</a> allows you to add testimonials anywhere on your website. Using it you can embed customer testimonial slider into your store pages in a few clicks.</p> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element testimonials"> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element testimonials"</span><span style="color: #008000; font-weight: bold">></span> {{widget type="Swissup\Testimonials\Block\Widgets\Slider" items_number="6" title="Our clients love us" slides_to_show="3" show_rating="1"}} <span style="color: #008000; font-weight: bold"></div></span> </pre> <section class="jumbotron" id="single-testimonial"> <div class="container"> <div class="title"> <h3>Single Testimonial</h3> <div class="actions"> <a href="javascript:void(0);" class="action show-code"> <span>Show Code</span> </a> </div> </div> <div class="content"> <div class="element testimonial-single"> </div> </div> </div> </section> <pre class="code" data-role="code"><span style="color: #008000; font-weight: bold"><div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">"element testimonial-single"</span><span style="color: #008000; font-weight: bold">></span> {{widget type="Swissup\Testimonials\Block\Widgets\Slider" items_number="6" title="" slides_to_show="1" show_rating="0" img_width="349" img_height="394"}} <span style="color: #008000; font-weight: bold"></div></span> </pre> <script> require([ 'jquery', 'Magento_Ui/js/modal/modal' ], function ($) { $(function () { $('[data-role=code]').each(function(index) { var $this = $(this), $section = $this.prev('section'), title = $section.find('.title > h3').text(); $section .find('.action.show-code') .attr('data-trigger', 'code-' + index); $(this).modal({ responsive: true, innerScroll: true, title: title, trigger: '[data-trigger=code-' + index + ']' }); }); }); }); </script>