Utah Design System
Utah Design System
Utah Design System
Utah Design System
Lead In Text - H1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
This is a heading - H2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
This is a heading - H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
This is a heading - H3
Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
- Used to emphasize a button when multiple buttons appear on a page or in close proximity.
- Limit the number of emphasized buttons in a view to ensure your button emphasis isn’t diluted
- When used in proximity to other buttons:
- Should appear on the right.
- Second item on this list
- This is a grandchild item on this list
- And another one goes here, this one is longer for evaluation purposes.
- Solid color.
This is a heading with a longer title - H4
Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.
This is a heading something - H4
Lorem ipsum dolor sit amet, accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.
This is a heading that is longer than the others - H4
Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
In order for headlines to use the correct size. Set both the font sizes to "calc". Then the css will be able to take over.
Headline <h1>
Headline <h2>
Headline <h3>
Headline <h4>
Headline <h5>
Headline <h6>
Header 1 | Header 2 | Header 3 |
---|---|---|
Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |
Row 4, Cell 1 | Row 4, Cell 2 | Row 4, Cell 3 |
Card Title Goes Here
Card Title Goes Here
This One is Two Lines
Card Title
This is a Card Title
Another Card Title
This is a Card Title
Another Card Title
External Link Button
Unemphasized Button (Outline)
Emphasized Button (Solid)
Unemphasized Button (Outline) with Icon
Emphasized Button (Solid) with Icon