Cards are a clean, consise means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like headings and photos with captions.

I will use Zurb's Foundation for the responsive grid, but the could easily swapped out with Bootstrap, PureCSS or the frontend framework of your choice.

The Angular Controller

Here's the simple controller that's used to fetch the user data from the RandomUser.me API. In a real AngularJs app you'd most likely move the $http get out to a user service, and then simply do something like userService.get() in the controller. This populates the $scope.users var that will be used to construct the panels using ng-repeat...

A little CSS is added to handle the text overflow, and to create the circle user images in each card. The ellipsis CSS class handle single line overflow since headings may vary in length. Also, the ellipsis-2 CSS class handles two-line overflow, so that descriptions inside the card show "..." instead of wrapping to another line. This enables each panel to be the same height.

For CSS animation, I'm using Dan Eden's animate.css. You'll see in the markup that AngularJS' ng-class-odd and ng-class-even can be used to switch styles on each panel rendered by the ng-repeat. The effect is that each panel alternates slide in from the left and right.

Alternately, you can create a staggered / cascading effect by adding a style delay to the -animation-duration used by the animate.css animated class. You don't need angular-animate for this since it's using the animate.css classes.