Content
The content component is essentially a series of helper guides for media layouts.
To the left you'll see the JHA Design touch icon. This icon is used when you add a bookmark to this page on your iOS device.
Structure
Elements
Heading
The content heading is meant to include a thumbnail or avatar along with a title of the content section. The thumbnail or avatar is aligned to the left edge and the title is displayed on the same line.
Spacing
Content push
Content push refers to the amount of margin that should be applied to the content area to provide proper alignment and avoid text wrap. This is extremely useful in providing hierarchy by visually grouping items together. The sizes and dimensions should correspond to those of thumbnails and avatars:
- Extra small
- Small
- Medium
- Large
- Extra large
| Account name | Balance |
|---|---|
| Free Checking | $400.00 |
| Savings | $16,999.99 |
| Account name | Balance |
|---|---|
| Share Draft | $400.00 |
| Savings | $16,999.99 |
Content pull
Content can also be “pulled” back to remove large padding on a small display.