Skip to content

Components / Content

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

Note
Consistent spacing is useful when you have several content blocks together, but it is otherwise optional.

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
JHA Bank
Account name Balance
Free Checking $400.00
Savings $16,999.99
Banno FCU
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.

© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.