Sidepanel
| Last update: | () |
| Message | doc(components): hide component from the menu |
| Committer: | Tamás Bíró |
| Version history | |
Default
<div class="e-sidepanel e-sidepanel-open">
<div class="e-sidepanel__header">
<div class="e-sidepanel__header__title">
Sidepanel Title
</div>
<div class="e-sidepanel__close">
<e-icon icon="close"></e-icon>
</div>
</div>
<div class="e-sidepanel__content"></div>
<div class="e-sidepanel__footer"></div></div>
<div class="e-sidepanel e-sidepanel-open">
<div class="e-sidepanel__header">
<div class="e-sidepanel__header__title">Sidepanel Title</div>
<div class="e-sidepanel__close">
<e-icon icon="close"></e-icon>
</div>
</div>
<div class="e-sidepanel__content"></div>
<div class="e-sidepanel__footer"></div>
</div>Show / Hide
Sidepanel Title
Service specific variations
Notification center
Default
<div class="e-sidepanel e-sidepanel-open">
<div class="e-sidepanel__header">
<div class="e-sidepanel__header__title">
Notification Center
</div>
<div class="e-sidepanel__close">
<e-icon icon="close"></e-icon>
</div>
</div>
<div class="e-sidepanel__content">
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-from-emarsys">
<span class="e-notice__icon">
<e-icon icon="e-b2clogo-simple"></e-icon>
</span>
<div class="e-notice__title">
Sint enim cupidatat eu
</div>
Minim do labore anim dolor do
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-segment-generation">
<span class="e-notice__icon">
<e-icon icon="users"></e-icon>
</span>
<div class="e-notice__title">
Culpa dolore nostrud deserunt
</div>
Laboris sunt ut ea occaecat ullamco
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-automation-center">
<span class="e-notice__icon">
<e-icon icon="ac-icon_connect"></e-icon>
</span>
<div class="e-notice__title">
Ipsum in sint anim
</div>
Eu do id anim excepteur veniam
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-data-import">
<span class="e-notice__icon">
<e-icon icon="user-plus"></e-icon>
</span>
<div class="e-notice__title">
Duis pariatur reprehenderit sint
</div>
Fugiat tempor labore ea quis pariatur
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-campaign-launch">
<span class="e-notice__icon">
<e-icon icon="envelope"></e-icon>
</span>
<div class="e-notice__title">
Laboris nisi dolor nulla
</div>
Dolor et in pariatur dolore sit
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-dns-fasttrack">
<span class="e-notice__icon">
<e-icon icon="e-rocket"></e-icon>
</span>
<div class="e-notice__title">
Dolor nisi non ullamco
</div>
Minim dolore tempor laboris officia in
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-achievement">
<span class="e-notice__icon">
<e-icon icon="e-thumbs-up"></e-icon>
</span>
<div class="e-notice__title">
Ex in non ea
</div>
Sint et elit dolor amet dolore
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-visual-content-editor">
<span class="e-notice__icon">
<e-icon icon="e-blocks"></e-icon>
</span>
<div class="e-notice__title">
Non duis dolore duis
</div>
Nisi aliqua quis mollit qui elit
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-from-emarsys">
<span class="e-notice__icon">
<e-icon icon="e-b2clogo-simple"></e-icon>
</span>
<div class="e-notice__title">
Occaecat proident deserunt non
</div>
Ut minim esse irure aliqua fugiat
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-segment-generation">
<span class="e-notice__icon">
<e-icon icon="users"></e-icon>
</span>
<div class="e-notice__title">
Ad anim proident qui
</div>
Lorem minim dolor aliquip incididunt irure
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-automation-center">
<span class="e-notice__icon">
<e-icon icon="ac-icon_connect"></e-icon>
</span>
<div class="e-notice__title">
Pariatur irure veniam non
</div>
Cillum labore in cillum minim qui
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-data-import">
<span class="e-notice__icon">
<e-icon icon="user-plus"></e-icon>
</span>
<div class="e-notice__title">
Culpa do commodo aliqua
</div>
Magna consequat exercitation in ad esse
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-campaign-launch">
<span class="e-notice__icon">
<e-icon icon="envelope"></e-icon>
</span>
<div class="e-notice__title">
Occaecat lorem cillum excepteur
</div>
In aute labore quis do laborum
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-dns-fasttrack">
<span class="e-notice__icon">
<e-icon icon="e-rocket"></e-icon>
</span>
<div class="e-notice__title">
Minim voluptate pariatur ea
</div>
Deserunt duis reprehenderit dolore in esse
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-achievement">
<span class="e-notice__icon">
<e-icon icon="e-thumbs-up"></e-icon>
</span>
<div class="e-notice__title">
In quis ut velit
</div>
Elit irure elit cupidatat excepteur amet
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-visual-content-editor">
<span class="e-notice__icon">
<e-icon icon="e-blocks"></e-icon>
</span>
<div class="e-notice__title">
Et do ut do
</div>
Sed eu eiusmod consequat minim amet
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-from-emarsys">
<span class="e-notice__icon">
<e-icon icon="e-b2clogo-simple"></e-icon>
</span>
<div class="e-notice__title">
Non occaecat aliquip et
</div>
Amet excepteur dolore deserunt incididunt aute
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-segment-generation">
<span class="e-notice__icon">
<e-icon icon="users"></e-icon>
</span>
<div class="e-notice__title">
Ut tempor minim sint
</div>
Dolor minim esse nostrud id adipiscing
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-automation-center">
<span class="e-notice__icon">
<e-icon icon="ac-icon_connect"></e-icon>
</span>
<div class="e-notice__title">
Reprehenderit est do dolore
</div>
Officia duis sint consequat incididunt exercitation
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-data-import">
<span class="e-notice__icon">
<e-icon icon="user-plus"></e-icon>
</span>
<div class="e-notice__title">
Magna do adipiscing in
</div>
Adipiscing nulla elit sunt in sint
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-campaign-launch">
<span class="e-notice__icon">
<e-icon icon="envelope"></e-icon>
</span>
<div class="e-notice__title">
Ex amet enim dolore
</div>
Incididunt velit minim ut dolore sed
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-dns-fasttrack">
<span class="e-notice__icon">
<e-icon icon="e-rocket"></e-icon>
</span>
<div class="e-notice__title">
Proident nostrud sed incididunt
</div>
Eu commodo elit eiusmod non ut
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-achievement">
<span class="e-notice__icon">
<e-icon icon="e-thumbs-up"></e-icon>
</span>
<div class="e-notice__title">
Dolore sed in velit
</div>
Dolor sed in reprehenderit consequat in
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-visual-content-editor">
<span class="e-notice__icon">
<e-icon icon="e-blocks"></e-icon>
</span>
<div class="e-notice__title">
Duis ea minim nostrud
</div>
Occaecat labore tempor aliqua voluptate in
</div>
</div>
<div class="e-sidepanel__footer">
<div class="e-switch">
<input type="checkbox" name="consent" value="1" id="toggleFilter" checked class="e-switch__input">
<label for="toggleFilter" class="e-switch__toggle"></label>
</div>
<label for="toggleFilter" style="margin-left: 8px; cursor: pointer" class="e-field__label-inline">
Only important
</label>
</div>
</div>
<div class="e-sidepanel e-sidepanel-open">
<div class="e-sidepanel__header">
<div class="e-sidepanel__header__title">Notification Center</div>
<div class="e-sidepanel__close">
<e-icon icon="close"></e-icon>
</div>
</div>
<div class="e-sidepanel__content">
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-from-emarsys"><span class="e-notice__icon">
<e-icon icon="e-b2clogo-simple"></e-icon></span>
<div class="e-notice__title">Aliqua adipiscing incididunt amet
</div>Consectetur nulla consequat exercitation cillum eu
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-segment-generation"><span class="e-notice__icon">
<e-icon icon="users"></e-icon></span>
<div class="e-notice__title">Culpa lorem reprehenderit esse
</div>Dolore anim quis magna ad sint
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-automation-center"><span class="e-notice__icon">
<e-icon icon="ac-icon_connect"></e-icon></span>
<div class="e-notice__title">Ut et sit dolor
</div>Ut irure sunt dolor duis ex
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-data-import"><span class="e-notice__icon">
<e-icon icon="user-plus"></e-icon></span>
<div class="e-notice__title">Nulla lorem eu fugiat
</div>Ut enim anim minim elit ut
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-campaign-launch"><span class="e-notice__icon">
<e-icon icon="envelope"></e-icon></span>
<div class="e-notice__title">Pariatur ut ullamco elit
</div>Ex ad anim dolor dolore sunt
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-dns-fasttrack"><span class="e-notice__icon">
<e-icon icon="e-rocket"></e-icon></span>
<div class="e-notice__title">Ut culpa occaecat ex
</div>Lorem quis nulla sunt quis sint
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-achievement"><span class="e-notice__icon">
<e-icon icon="e-thumbs-up"></e-icon></span>
<div class="e-notice__title">Sit velit ut voluptate
</div>Non dolore occaecat veniam est ullamco
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-visual-content-editor"><span class="e-notice__icon">
<e-icon icon="e-blocks"></e-icon></span>
<div class="e-notice__title">Eiusmod proident dolor nulla
</div>Consectetur lorem mollit dolore sunt dolor
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-from-emarsys"><span class="e-notice__icon">
<e-icon icon="e-b2clogo-simple"></e-icon></span>
<div class="e-notice__title">Mollit velit enim reprehenderit
</div>Adipiscing magna proident non in laborum
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-segment-generation"><span class="e-notice__icon">
<e-icon icon="users"></e-icon></span>
<div class="e-notice__title">Aute sit officia laborum
</div>In laboris labore ullamco tempor magna
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-automation-center"><span class="e-notice__icon">
<e-icon icon="ac-icon_connect"></e-icon></span>
<div class="e-notice__title">Culpa ullamco duis veniam
</div>Eiusmod sed dolor ut et eu
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-data-import"><span class="e-notice__icon">
<e-icon icon="user-plus"></e-icon></span>
<div class="e-notice__title">Labore cillum exercitation nulla
</div>Magna eiusmod deserunt incididunt aute dolor
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-campaign-launch"><span class="e-notice__icon">
<e-icon icon="envelope"></e-icon></span>
<div class="e-notice__title">Sed non in minim
</div>Culpa ipsum sunt labore occaecat irure
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-dns-fasttrack"><span class="e-notice__icon">
<e-icon icon="e-rocket"></e-icon></span>
<div class="e-notice__title">Laboris velit enim in
</div>Amet nisi duis ut minim qui
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-achievement"><span class="e-notice__icon">
<e-icon icon="e-thumbs-up"></e-icon></span>
<div class="e-notice__title">Eiusmod ut labore voluptate
</div>Adipiscing et laboris ipsum est ea
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-visual-content-editor"><span class="e-notice__icon">
<e-icon icon="e-blocks"></e-icon></span>
<div class="e-notice__title">Reprehenderit sed lorem do
</div>Id labore elit est dolor consectetur
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-from-emarsys"><span class="e-notice__icon">
<e-icon icon="e-b2clogo-simple"></e-icon></span>
<div class="e-notice__title">Proident sit ut ut
</div>Anim nostrud cillum ex esse eiusmod
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-segment-generation"><span class="e-notice__icon">
<e-icon icon="users"></e-icon></span>
<div class="e-notice__title">Occaecat minim labore ullamco
</div>Id pariatur fugiat magna proident commodo
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-automation-center"><span class="e-notice__icon">
<e-icon icon="ac-icon_connect"></e-icon></span>
<div class="e-notice__title">Aute qui dolore voluptate
</div>In enim sit labore irure elit
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-data-import"><span class="e-notice__icon">
<e-icon icon="user-plus"></e-icon></span>
<div class="e-notice__title">Mollit ut quis anim
</div>Magna proident fugiat duis ut eiusmod
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-campaign-launch"><span class="e-notice__icon">
<e-icon icon="envelope"></e-icon></span>
<div class="e-notice__title">Nisi incididunt nisi dolore
</div>Anim do labore ea ut nulla
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-dns-fasttrack"><span class="e-notice__icon">
<e-icon icon="e-rocket"></e-icon></span>
<div class="e-notice__title">Do excepteur sint fugiat
</div>Irure ullamco adipiscing consequat velit amet
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-achievement"><span class="e-notice__icon">
<e-icon icon="e-thumbs-up"></e-icon></span>
<div class="e-notice__title">Velit qui excepteur commodo
</div>Deserunt esse officia qui fugiat exercitation
</div>
<div class="e-notice e-notice-sticky e-notice-withicon e-notice-visual-content-editor"><span class="e-notice__icon">
<e-icon icon="e-blocks"></e-icon></span>
<div class="e-notice__title">Consectetur reprehenderit ad ea
</div>Dolor labore id eiusmod elit velit
</div>
</div>
<div class="e-sidepanel__footer">
<div class="e-switch">
<input type="checkbox" name="consent" value="1" id="toggleFilter" checked="" class="e-switch__input">
<label for="toggleFilter" class="e-switch__toggle"></label>
</div>
<label for="toggleFilter" style="margin-left: 8px; cursor: pointer" class="e-field__label-inline">Only important</label>
</div>
</div>Show / Hide
Notification Center
Deserunt pariatur ut quis
Ex incididunt ad ut dolor labore
Incididunt aute occaecat officia
Duis lorem adipiscing ad voluptate aliquip
Sunt magna incididunt cupidatat
Dolore do nulla id nostrud non
Elit aute ut aliqua
Laborum id elit dolore et excepteur
Quis dolore excepteur minim
Sed magna irure qui dolor deserunt
Minim dolore dolor officia
Cupidatat laborum duis culpa pariatur ipsum
Laboris quis labore deserunt
Labore incididunt veniam ut aliqua consequat
Esse mollit sit sunt
Cupidatat aliqua ullamco amet exercitation proident
Occaecat pariatur in laborum
Dolore velit officia aliquip culpa dolore
Sint eiusmod cupidatat magna
Consequat commodo fugiat consequat in occaecat
Sint ipsum incididunt reprehenderit
Et in laborum tempor excepteur in
Nisi ex sit nulla
Reprehenderit veniam nisi eiusmod culpa deserunt
Occaecat amet laborum sunt
In quis proident consectetur pariatur nostrud
Voluptate aliqua eu labore
Dolor minim ut amet aute et
Est commodo esse excepteur
Nulla ex lorem nisi consectetur pariatur
Ea adipiscing laborum nulla
Labore ut velit voluptate est est
Fugiat tempor dolore cupidatat
Mollit irure est ipsum tempor in
Culpa ut nulla lorem
Ullamco sint voluptate sunt sint duis
Sit veniam occaecat nostrud
Culpa exercitation tempor qui qui labore
Elit consequat dolor fugiat
Culpa nostrud exercitation culpa officia cupidatat
Cupidatat do irure esse
Anim quis reprehenderit in aliqua ut
Dolore reprehenderit non et
Sit laboris dolor dolore excepteur nisi
Id cillum non consequat
Ut qui sed dolor et voluptate
Ut exercitation sit in
Eiusmod culpa ut proident consequat sit