Bx

Media Object

<bx-media>
  <img src="//placehold.it/128"/>
  <h3>Media Object</h3>
  <p>Put whatever you want here</p>
</bx-media>

<bx-media center="true">
  <img src="//placehold.it/128"/>
  <h3 class="m0">Centered Media Object</h3>
  <p class="m0">Basically the flag object</p>
</bx-media>

Message

<bx-message>Flash Message</bx-message>
<bx-message state="info">Info Message</bx-message>
<bx-message state="success">Success Message</bx-message>
<bx-message state="warning">Warning Message</bx-message>
<bx-message state="error">Error Message</bx-message>
<bx-message state="dark">Dark Message</bx-message>

Badge

<h3>Hamburger <bx-badge>Default</bx-badge></h3>
<h3>Hamburger <bx-badge state="info">Info</bx-badge></h3>
<h3>Hamburger <bx-badge state="success">Success</bx-badge></h3>
<h3>Hamburger <bx-badge state="warning">Warning</bx-badge></h3>
<h3>Hamburger <bx-badge state="error">Error</bx-badge></h3>
<h3>Hamburger <bx-badge state="dark">Dark</bx-badge></h3>

Button

<bx-button>Button</bx-button>
<bx-button color="blue">Blue Button</bx-button>
<bx-button color="red">Red Button</bx-button>
<bx-button color="blue" toggle="true">Toggle Button</bx-button>

Nav Item

<bx-nav-item href="#nav-item">Nav Item</bx-nav-item>

Menu

<bx-menu>
  <bx-nav-item href="#nav-item">Nav Item</bx-nav-item>
  <bx-nav-item href="#nav-item">Nav Item</bx-nav-item>
  <bx-nav-item href="#nav-item">Nav Item</bx-nav-item>
  <bx-nav-item href="#nav-item">Nav Item</bx-nav-item>
</bx-menu>

Column & Row

<bx-row>
  <bx-column width="4"><div class="p2 border rounded">bx-column 4</div></bx-column>
  <bx-column width="4"><div class="p2 border rounded">bx-column 4</div></bx-column>
  <bx-column width="4"><div class="p2 border rounded">bx-column 4</div></bx-column>
</bx-row>

Flex

<bx-flex wrap="true" class="mxn2">
  <div class="col col-4 px2"> <div class="p2 border rounded">bx-flex</div> </div>
  <div class="col col-4 px2"> <div class="p2 border rounded">bx-flex</div> </div>
  <div class="col col-4 px2"> <div class="p2 border rounded">bx-flex</div> </div>
</bx-flex>

Panel

<bx-panel state="info" class="p2">
  <header>bx-panel</header>
  <img src="//placekitten.com/256" />
  <p>Just a default panel</p>
  <footer>Footer</footer>
</bx-panel>

---