Bienvenue dans le Style Guide

Nulla sit amet vulputate nulla, eget lacinia magna.
Proin suscipit nisl vel quam placerat, ut faucibus ipsum congue.

Lire la suite

// TYPE : Widget
// NOM : "B2P - Banner"

{{
    widget
    type="B2P\Widgets\Block\Widget\Banner"
    background="/page_cms/styleguide/banner.jpg"
    title="Bienvenue dans le Style Guide"
    description="Nulla sit amet vulputate nulla, eget lacinia magna.<br/>Proin suscipit nisl vel quam placerat, ut faucibus ipsum congue."
    button_title="Lire la suite" button_link="/styleguide"
}}

// TYPE : Widget
// NOM : "B2P - TextZone"

{{
    widget
    type="B2P\Widgets\Block\Widget\TextZone"
    title="Pourquoi nous choisir ?"
    description="Nam porttitor odio id elit pretium ullamcorper. Proin condimentum, lectus sit amet malesuada iaculis, magna eros lobortis ante, non eleifend turpis enim vitae massa. Morbi venenatis quam ut dui rhoncus, vel pulvinar leo ultricies. Sed turpis nibh, ornare et lobortis eget, <a href="#" class="b2p-link b2p-link-red">interdum in urna. Aliquam erat volutpat. Mauris ornare gravida varius. Phasellus eros erat, ultricies et pulvinar id, consectetur hendrerit metus. Nulla convallis, velit non consequat malesuada, nunc dui faucibus elit, quis condimentum elit erat sit amet erat."
}}

Made in France !

Morbi ultricies nibh eget ornare viverra. Nam non enim et sapien imperdiet porttitor. Integer eleifend tincidunt placerat. Morbi euismod bibendum luctus

En savoir plus

// TYPE : Widget
// NOM : "B2P - Card"

{{
    widget
    type="B2P\Widgets\Block\Widget\Card"
    display_type="left"
    picture="/page_cms/styleguide/card-1.jpg"
    title="Made in France !"
    description="Morbi ultricies nibh eget ornare viverra. Nam non enim et sapien imperdiet porttitor. Integer eleifend tincidunt placerat. Morbi euismod bibendum luctus"
    button_title="En savoir plus"
    button_link="/styleguide"
}}

// TYPE : HTML
// NOM : "B2P - Tabs"

<div class="b2p-tabs product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
	
	<!-- Tab 1 -->
	<div class="b2p-tab-title item title" data-role="collapsible">
		<a class="data switch" data-toggle="switch" href="#tab_1" tabindex="-1"><span>TAB_1 : TITLE</span></a>
	</div>
	<div class="b2p-tab-content item content" data-role="content" id="tab_1">
		<p>Maecenas justo risus, auctor nec quam sit amet, blandit mattis augue. Morbi dictum at nulla eu pretium. Maecenas cursus aliquet aliquam. Sed mollis euismod nisi, non pharetra dui suscipit in. Suspendisse potenti. Sed et turpis sit amet nulla pharetra feugiat. Cras in vulputate sapien. Mauris at ipsum quis urna dictum elementum. Suspendisse gravida nisi id euismod ultricies. In hac habitasse platea dictumst.</p>
	</div>

	<!-- Tab 2 -->
	<div class="b2p-tab-title item title" data-role="collapsible">
		<a class="data switch" data-toggle="switch" href="#tab_2" tabindex="-1"><span>TAB_2 : TITLE</span></a>
	</div>
	<div class="b2p-tab-content item content" data-role="content" id="tab_2">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis magna diam, sed auctor nulla tempus at. Praesent blandit arcu sit amet justo eleifend, in rutrum dolor ornare. Aliquam vel rhoncus nisl. Morbi scelerisque vehicula egestas. Sed eu nisi ac tellus accumsan ultricies suscipit pulvinar augue. Fusce euismod tellus ut dictum faucibus. Maecenas quis nibh varius, tincidunt justo in, pellentesque odio. Maecenas ornare volutpat orci, sed viverra neque luctus blandit. Aliquam facilisis vel ex quis interdum. Nulla lacinia magna at sem posuere interdum. Nullam accumsan pulvinar porttitor. In eu diam mattis, semper massa sit amet, pulvinar sem.</p>
	</div>

    ...

</div>

// TYPE : HTML
// NOM : "B2P - Accordion"

<div class="b2p-accordion-list">
    <h1 class="b2p-title b2p-title-h1 b2p-color-black">Les questions fréquentes:</h1>

    <!-- Question 1 -->
    <details class="info">
        <summary>Comment créer mon fichier ?</summary>
        <p>Quisque a fringilla diam, ac venenatis odio. Curabitur iaculis finibus lorem, et consequat metus pharetra dignissim. Vivamus tempor non felis non aliquam. Etiam bibendum erat ipsum, id commodo purus auctor non. Sed sit amet lobortis urna. Nunc vestibulum, dui at pretium cursus, lacus nibh porttitor nisl, vel gravida lacus justo vulputate elit. Aliquam ut nisi justo.</p>
    </details>

    <!-- Question 2 -->
    <details class="info">
        <summary>Comment envoyer mon fichier ?</summary>
        <p>Quisque a fringilla diam, ac venenatis odio. Curabitur iaculis finibus lorem, et consequat metus pharetra dignissim. Vivamus tempor non felis non aliquam. Etiam bibendum erat ipsum, id commodo purus auctor non. Sed sit amet lobortis urna. Nunc vestibulum, dui at pretium cursus, lacus nibh porttitor nisl, vel gravida lacus justo vulputate elit. Aliquam ut nisi justo.</p>
    </details>

        ...

</div>

B2P - Grid Showcase (5)

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit sur deux lignes

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

Mon intitulé produit

Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique

// TYPE : HTML
// NOM : "B2P - Grid Showcase"

<div class="b2p-grid-showcase b2p-grid-showcase-5">
	<div class="b2p-title b2p-title-h1 b2p-color-black">
		B2P - Grid Showcase (5)
	</div>
	<div class="b2p-grid-showcase-items">

		<!- Item 1 -->
		<div class="b2p-grid-showcase-item b2p-grid-showcase-item-light">
			<div class="is-zone-link">
				<div>
					<picture><img src="/media/wysiwyg/smartwave/porto/homepage/04/shop4_cat1.jpg"></picture>
				</div>
				<h3 class="">Mon intitulé produit</h3><a href="#"></a>
			</div>
                        <div class="classic-desc">
                                <p class="desc-mini">Suspendisse id risus nec velit mattis tristique. Pellentesque habitant morbi tristique</p>
                        </div>
		</div>

		...

	</div>
</div>

// TYPE : Widget
// NOM : "B2P - Spacer"

{{
    widget
    type="B2P\Widgets\Block\Widget\Spacer"
    spacing="two"
}}

// TYPE : Widget
// NOM : "B2P - Contact"

{{
    widget
    type="B2P\Widgets\Block\Widget\Contact"
    title="Mon super produit"
}}