Styles

Date of product can be shown or hidden on this template

May 06, 2022

This is an H1
(font-family: Jost, sans-serif; padding-bottom: 1.6rem; line-height: 1.3; font-weight: 700; color: #323e48)

This is paragraph text:

Aliquam erat volutpat. Aenean suscipit justo vel ligula feugiat varius. Quisque magna nisl, elementum ut pulvinar eu, condimentum a enim. Sed sed lorem in purus tristique pellentesque. Donec sed leo et est porta pharetra quis vel augue. Pellentesque pharetra, diam a imperdiet auctor, massa lorem rutrum nisi, ut placerat nisi tellus sed metus.

This is bolded text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique arcu blandit ligula cursus lobortis. Nunc tristique congue augue eget mollis. In hac habitasse platea dictumst. Sed quis quam libero, ut placerat sem. Curabitur a elit ac ante gravida lobortis ut eu nisi. Nulla facilisi. Cras non ante ligula. Aenean tempor ornare euismod.Sed quis est ac diam dictum faucibus. Suspendisse tristique ante ut leo accumsan et sollicitudin risus volutpat. Morbi ultricies suscipit interdum. Etiam id mi mauris, in commodo semr libero. This is a link. Adipiscing elit ut aliquam purus sit amet luctus venenatis.

This is an H2

  • This is an unordered bullet list - two levels.
  • Unordered bullet.
    • Second level unordered bullet.
    • Second level unordered bullet.

This is an H3

  1. This is an ordered bullet list - two levels.
  2. Ordered bullet.
    1. Second level ordered bullet.
    2. Second level ordered bullet.

This is an H4

This is an H5 - this should rarely be used.
This is an H6 - this should rarely be used.

Color Palette (current in review)

astho.org color palette.png

Web Icons

ASTHO uses the material icons library.

Color use depends on background color. In general, ASTHO uses orange as the color when on white background; white as the color when on a color background. See example below.

settings_input_antennaPodcast

Components

Sample bio cards - can be used with white or blue background, show as 3 or 4 across in desktop layout; images should be portrait with a...

Heading Above Image

First Name Last Name, Credentials

Heading Above Image

First Name Last Name, Credentials

Heading Above Image

First Name Last Name, Credentials

Heading Above Image

First Name Last Name, Credentials

Sample rich text with background block allows us to add color to the background. Layout can be 1/4, 1/3, 1/2, 3/4 across in desktop view. This example is 1/4 with blue background.

A senior woman using a laptop for a telehealth appointment, , ASTHO Health Policy Update banner in the upper-left corner

Image with CTA

teaser language

Link to Resource

Extra language or links or

Buttons

A senior woman using a laptop for a telehealth appointment, , ASTHO Health Policy Update banner in the upper-left corner

Image with CTA

teaser language

Link to Resource

Extra language or links or

Buttons

Video Embed with Title and Link to YouTube Video

Watch Now

Table 1. Table Example

Label Label Label Label
Entry Entry Entry Entry
Entry Entry Entry Entry
Entry Entry Entry Entry
Entry Entry Entry Entry
Entry Entry Entry Entry
Entry Entry Entry Entryt
Entry Entry Entry Entry

Source: Name of Source

* Note