ASSEMBLE

Examples

One Partial, Many Possibilities

Alert example

External data example. This alert was pesimad from a partial and YAML data fron in './src/data/`

Button example

Visit Assemble

"Panels"

Every "module" on this page is constructed from the same "partial", the only difference is the data supplied to each one from module.json.

The craziest thing about this is that I didn't (really) have to massacre the partial to make it work. I took liberties for the progress bars mostly, but considering how sparse the template is I don't feel too bad about it.

Panel Heading
Panel content...
Panel Heading
Panel content...
Panel Heading
Panel content...
Panel Heading
Panel content...
Panel Heading
Panel content...
Panel Heading
Panel content...
Panel Heading
Panel content...
Panel Heading
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Alerts

Heads up!
This alert needs your attention, but it's not super important.
Well done!
You successfully read this important alert message.
Oh snap!
Change a few things up and try submitting again.
Oh snap!
Change a few things up and try submitting again.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Progress Bars

Panel Heading
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Panel Heading
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Wells

This is a well...
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
This is another well...
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • glyphicon-glass
  • glyphicon-music
  • glyphicon-search
  • glyphicon-envelope
  • glyphicon-heart
  • glyphicon-star
  • glyphicon-star-empty
  • glyphicon-user
  • glyphicon-film
  • glyphicon-th-large
  • glyphicon-th
  • glyphicon-th-list
  • glyphicon-ok
  • glyphicon-remove
  • glyphicon-zoom-in
  • glyphicon-zoom-out
  • glyphicon-off
  • glyphicon-signal
  • glyphicon-cog
  • glyphicon-trash
  • glyphicon-home
  • glyphicon-file
  • glyphicon-time
  • glyphicon-road
  • glyphicon-download-alt
  • glyphicon-download
  • glyphicon-upload
  • glyphicon-inbox
  • glyphicon-play-circle
  • glyphicon-repeat
  • glyphicon-refresh
  • glyphicon-list-alt
  • glyphicon-lock
  • glyphicon-flag
  • glyphicon-headphones
  • glyphicon-volume-off
  • glyphicon-volume-down
  • glyphicon-volume-up
  • glyphicon-qrcode
  • glyphicon-barcode
  • glyphicon-tag
  • glyphicon-tags
  • glyphicon-book
  • glyphicon-bookmark
  • glyphicon-print
  • glyphicon-camera
  • glyphicon-font
  • glyphicon-bold
  • glyphicon-italic
  • glyphicon-text-height
  • glyphicon-text-width
  • glyphicon-align-left
  • glyphicon-align-center
  • glyphicon-align-right
  • glyphicon-align-justify
  • glyphicon-list
  • glyphicon-indent-left
  • glyphicon-indent-right
  • glyphicon-facetime-video
  • glyphicon-picture
  • glyphicon-pencil
  • glyphicon-map-marker
  • glyphicon-adjust
  • glyphicon-tint
  • glyphicon-edit
  • glyphicon-share
  • glyphicon-check
  • glyphicon-move
  • glyphicon-step-backward
  • glyphicon-fast-backward
  • glyphicon-backward
  • glyphicon-play
  • glyphicon-pause
  • glyphicon-stop
  • glyphicon-forward
  • glyphicon-fast-forward
  • glyphicon-step-forward
  • glyphicon-eject
  • glyphicon-chevron-left
  • glyphicon-chevron-right
  • glyphicon-plus-sign
  • glyphicon-minus-sign
  • glyphicon-remove-sign
  • glyphicon-ok-sign
  • glyphicon-question-sign
  • glyphicon-info-sign
  • glyphicon-screenshot
  • glyphicon-remove-circle
  • glyphicon-ok-circle
  • glyphicon-ban-circle
  • glyphicon-arrow-left
  • glyphicon-arrow-right
  • glyphicon-arrow-up
  • glyphicon-arrow-down
  • glyphicon-share-alt
  • glyphicon-resize-full
  • glyphicon-resize-small
  • glyphicon-plus
  • glyphicon-minus
  • glyphicon-asterisk
  • glyphicon-exclamation-sign
  • glyphicon-gift
  • glyphicon-leaf
  • glyphicon-fire
  • glyphicon-eye-open
  • glyphicon-eye-close
  • glyphicon-warning-sign
  • glyphicon-plane
  • glyphicon-calendar
  • glyphicon-random
  • glyphicon-comment
  • glyphicon-magnet
  • glyphicon-chevron-up
  • glyphicon-chevron-down
  • glyphicon-retweet
  • glyphicon-shopping-cart
  • glyphicon-folder-close
  • glyphicon-folder-open
  • glyphicon-resize-vertical
  • glyphicon-resize-horizontal
  • glyphicon-hdd
  • glyphicon-bullhorn
  • glyphicon-bell
  • glyphicon-certificate
  • glyphicon-thumbs-up
  • glyphicon-thumbs-down
  • glyphicon-hand-right
  • glyphicon-hand-left
  • glyphicon-hand-up
  • glyphicon-hand-down
  • glyphicon-circle-arrow-right
  • glyphicon-circle-arrow-left
  • glyphicon-circle-arrow-up
  • glyphicon-circle-arrow-down
  • glyphicon-globe
  • glyphicon-wrench
  • glyphicon-tasks
  • glyphicon-filter
  • glyphicon-briefcase
  • glyphicon-fullscreen
  • glyphicon-dashboard
  • glyphicon-paperclip
  • glyphicon-heart-empty
  • glyphicon-link
  • glyphicon-phone
  • glyphicon-pushpin
  • glyphicon-euro
  • glyphicon-usd
  • glyphicon-gbp
  • glyphicon-sort
  • glyphicon-sort-by-alphabet
  • glyphicon-sort-by-alphabet-alt
  • glyphicon-sort-by-order
  • glyphicon-sort-by-order-alt
  • glyphicon-sort-by-attributes
  • glyphicon-sort-by-attributes-alt
  • glyphicon-unchecked
  • glyphicon-expand
  • glyphicon-collapse
  • glyphicon-collapse-top