Styleguide

Skypilot Groundwork Styleguide

Typography

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque labore, delectus sed at adipisci ullam. This is link inside paragraph. Magni ab officiis possimus excepturi ex earum totam saepe aliquam recusandae facere voluptates, inventore beatae iusto quos, deleniti, et suscipit quam tempore fugit natus dolorum dicta! Quisquam repellat accusamus, obcaecati ex unde vel soluta recusandae?

Buttons

Large

Default

Small

Forms

Section padding

The section block padding controls the block padding and the container class controls the inline padding.

Paragraph that comes before a title

Title that comes before a button

Example when there are 2 buttons. Margin applied dynamically according to breakpoints. No additional classes needed

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam veniam dolores eveniet quo doloribus labore, ipsa consequatur neque! Quam sequi quod voluptas reprehenderit quas officiis excepturi cum animi tenetur vitae.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Hello I am an h2

Example of list

  • Apple

  • Banana

  • Coconut

Case 1 with the a smaller margin

  • Apple

  • Banana

  • Coconut

Case 2 with a bigger margin

  • Apple

  • Banana

  • Coconut

Hello World

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti numquam nisi?