Address410 17th Street
Denver, CO 80202-4402
$1.4kGiven to Building Fund
Now that you've learned how to get a SKY UX app up and running, let's build a page with some content. SKY UX applications feature two common page types: record pages and tabbed pages.
Record pages usually display information about specific records in two distinct sections: a summary section and a tiles section.
The summary section resides at the top of the page to provide a general overview of a record. For example, it can display information such as a record name, description, and profile picture. To add a summary section to your page, use the page summary directive. Here's an example of a summary section with a name, description, and profile photo:
<bb-page-summary> <bb-page-summary-image> <bb-avatar bb-avatar-src="'/assets/img/hernandez.jpg'"> </bb-avatar> </bb-page-summary-image> <bb-page-summary-title> Robert Hernandez </bb-page-summary-title> <bb-page-summary-subtitle> CEO, Barkbaud, Inc. </bb-page-summary-subtitle> <bb-page-summary-content> Robert Hernandez is an important member of our organization. </bb-page-summary-content> </bb-page-summary>
The tiles section usually consists of two columns of tiles (or one column for extra-small screen sizes like mobile phones) that displays more information about a record in logical sections. Each tile includes a header and body for the tile's title and content. Tiles are collapsible, and if they are used in conjunction with a tiles dashboard, users can rearrange them.
<div class="container-fluid"> <div class="row bb-page-content-multicolumn"> <div class="col-md-6 bb-page-content-tile-column"> <bb-tile bb-tile-header="'Personal information'"> <div bb-tile-section> <h4>Address</h4> 410 17th Street <br> Denver, CO 80202-4402 </div> </bb-tile> </div> <div class="col-md-6 bb-page-content-tile-column"> <bb-tile bb-tile-header="'Latest gift'"> <div bb-tile-section> <h4>$1.4k</h4> Given to Building Fund <br> 10/21/2015 </div> </bb-tile> </div> </div> </div>
Tiles can display data in all kinds of formats, including a list of fields with their values, a repeater view of records, a chart, or anything else you can imagine. You can find more information about common data elements in tiles in the Components section, but for now let's move on to tabbed pages.
Next step: Create a tabbed page »
© Blackbaud, Inc. All rights reserved.