Aidin Styleguide

Reference this page for examples of existing atomic components. If you add or update globally reusable components, please add or update here.

Gutter Containers

Wrap any content that should be withing the global gutters (that is, no full screen width) in the following tags. This is often per module, ratehr than per-page, so some content can go full width if needed.

Notice the green gutter and red container in the example here.

<div class="h-gutter bg-green-400">
  <div class="container bg-red-400">
    { ... Your inner content ... }
  </div>
</div>
Link and Button Styles
Primary Button Secondary Button Tertiary Button
Heading Styles

H1 Let’s make healthcare transitions easier for everyone

Heading 2; lorem ipsum dolor sit amet conspecuitor perspicacium.

Heading 3; lorem ipsum dolor sit amet conspecuitor perspicacium.

Heading 4; lorem ipsum dolor sit amet conspecuitor perspicacium.

Heading 5; lorem ipsum dolor sit amet conspecuitor perspicacium.
Heading 6; lorem ipsum dolor sit amet conspecuitor perspicacium.
Copy Styles

Paragraph default; lorem ipsum dolor sit amet conspecuitor perspicacium.

Paragraph small; lorem ipsum dolor sit amet conspecuitor perspicacium.

Panel Containers

This is a panel.

Heading

Average daily staff time saved per team member

Heading

Average daily staff time saved per team member

Heading

Average daily staff time saved per team member

This is a practice Heading for Panel_2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam, rerum, repudiandae ratione tempore praesentium.

This is a practice Heading for Panel_2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam, rerum, repudiandae ratione tempore praesentium.

This is a practice Heading for Panel_2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam, rerum, repudiandae ratione tempore praesentium.

Images

Images shoud be lazy loaded using the .lazy class.

test default
Shape Filigree

Get connected

Subscribe to our newsletter to get quarterly updates about industry events, webinars, and new innovations that will help your team. If you choose to provide us with your information, we will only use it to send you our newsletter. You can unsubscribe at any time.