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 StylesPrimary Button Secondary Button Tertiary Button
Heading Styles
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.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam, rerum, repudiandae ratione tempore praesentium.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam, rerum, repudiandae ratione tempore praesentium.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam, rerum, repudiandae ratione tempore praesentium.
Images
Images shoud be lazy loaded using the .lazy class.
Shape Filigree
Let’s transform healthcare together