A Brick box element in which cards can be cycled independently of order with a variety of different transitions.


Check it live!


  1. Import Web Components polyfill:

     <script src="bower_components/platform/platform.js"></script>
  2. Import Custom Element:

     <link rel="import" href="src/brick-deck.html">
  3. Start using it:

     <brick-deck selected-index="0">
       <brick-card selected>0</brick-card>


Attribute Options Default Description
transition-type string
  • slide-left
  • slide-right
  • slide-up
  • slide-down
- Defines the type of animation to use for cycling between cards. The default is no transition animation.
This property can either be set as an HTML attribute under the name transition-type, or programmatically with the property transitionType selected-index.
selected-index number - Gets/sets the index of the currently selected card in the deck.
Can either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex.
loop boolean - Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index.


Poperty Type Description
transitionType string corresponds to the transition-type attribute
selectedIndex string corresponds to the selected-index attribute
loop boolean corresponds to the loop attribute
cards (getter only) array array of all the brick-card elements contained in an brick-deck
selectedCard (getter only) brick-card the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.


Method Returns Description
showCard(index / element, [direction]) - Transitions to the brick-card at the given index within the deck. If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.
hideCard(index / element) - Hides the card element or card located at a specified index.
nextCard([direction]) - Transitions to the next card in the deck, looping back to the start if needed.
previousCard([direction]) - Transitions to the previous card in the deck, looping back to the end if needed.


Event Description
show Fired from a card target after it has completed its show animation, and the show state has been finalized.
hide Fired from a card target after it has completed its hide animation, and the hide state has been finalized.


Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.