Grid system example - Fixed columns (they do NOT stack on mobile - they shrink)
ROW 1 - 1 of 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 1 - 2 of 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 2 - 1 of 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 2 - 2 of 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 2- 3 of 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 3 - 1 of 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero.
ROW 3 - 2 of 3 (FORCED WIDER) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero.
ROW3 - 3 of 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus eros, consequat et vehicula a, elementum non libero.
Grid system example - Stacked on small devices
ROW 1 - 1 of 2 (66.6%) Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 1 - 2 of 2 (33.3%) Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 2 - 1 of 3 (33.3%) Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 2 - 2 of 3 (33.3%) Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ROW 2 - 2 of 3 (33.3%) Aenean lectus eros, consequat et vehicula a, elementum non libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Form example - Sign Up
Table example
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Craig | Eastwood | @eastie71 |
| 2 | Jacob | Townsend | @listen |
| 3 | Big Bird | @bbird | |
Cool Dismissable Messages Examples
Hey there! You can close this message. Click on the X!
Oh No! A Error Occurred! Just kidding... close this message. Click on the X!
Card Examples
Card One
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card Two
This card has supporting text below as a natural lead-in to additional content.
Card Three
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.