diff options
Diffstat (limited to 'docs/src/contents/popovers.pug')
| -rw-r--r-- | docs/src/contents/popovers.pug | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug deleted file mode 100644 index b2c1b33..0000000 --- a/docs/src/contents/popovers.pug +++ /dev/null @@ -1,83 +0,0 @@ -p Popovers are small overlay content containers. Popovers component is built entirely in CSS. - -.docs-demo.columns - .column.col-3.col-sm-6 - .popover - a.btn.btn-primary(href="#popovers") - | top popover - .popover-container - .card - .card-header - .card-title.h5 Apple - .card-subtitle.text-gray Software and hardware - .card-body - | To make a contribution to the world by making tools for the mind that advance humankind. - .card-footer - button.btn.btn-primary Buy - .column.col-3.col-sm-6 - .popover.popover-right - a.btn.btn-primary(href="#popovers") - | right popover - .popover-container - .card - .card-header - .card-title.h5 Apple - .card-subtitle.text-gray Software and hardware - .card-body - | To make a contribution to the world by making tools for the mind that advance humankind. - .card-footer - button.btn.btn-primary Buy - .column.col-3.col-sm-6 - .popover.popover-bottom - a.btn.btn-primary(href="#popovers") - | bottom popover - .popover-container - .card - .card-header - .card-title.h5 Apple - .card-subtitle.text-gray Software and hardware - .card-body - | To make a contribution to the world by making tools for the mind that advance humankind. - .card-footer - button.btn.btn-primary Buy - .column.col-3.col-sm-6 - .popover.popover-left - a.btn.btn-primary(href="#popovers") - | left popover - .popover-container - .card - .card-header - .card-title.h5 Apple - .card-subtitle.text-gray Software and hardware - .card-body - | To make a contribution to the world by making tools for the mind that advance humankind. - .card-footer - button.btn.btn-primary Buy - -p - | Wrap an element by a container with the #[code popover] class. - | And add a container with the #[code popover-container] next to the element. - | You can use #[a(href="#cards") Cards] component inside the #[code popover-container]. -p - | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position. - | By default, the popovers appear above the element. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <div class="popover popover-right"> - <button class="btn btn-primary">right popover</button> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - ... - </div> - <div class="card-body"> - ... - </div> - <div class="card-footer"> - ... - </div> - </div> - </div> - </div>
\ No newline at end of file |