on Humanitec

Spacing

mr-5
mr-20
mr-40
mt-3
mt-20
mt-40
width-80
width-200

H2 title

H1

H2

H3

H4

H5
text
text__sml
label
text__fog
text__alert
text__mono
annotation

Colors

Dark theme

darker
base
brighter
brightest
outline
layer
text
text
fog
text
translucent
text
transprent

Bright theme

darker
base
brighter
brightest
outline
layer
text
text
fog
text
translucent
text
transprent

Shared colors

main
darker
main
main
brighter
main
transparent
alert
alert
brighter
alert
transparent

Select

select__40-in-form
select__40-in-form

Inputs and text areas

input__24
is--active|
is--disabled
is--left
is--mid
is--right
input__32
is--active|
is--disabled
is--left
is--mid
is--right
input__40
is--active|
is--left
is--mid
is--right
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
01{
02 ALLOWED_HOSTS: ‘*’
03 DATABASE_ENGINE: postgresql
04 DATABASE_HOST: 127.0.0.1
05 DATABASE_NAME: db-fd11e056-cff4-4368-bb13-80e1eced2d59
06 DATABASE_PORT: “5432”
07}

Switches, checkboxes, and toggles

switch
switch
switch
checkbox
checkbox
radio
radio
radio is--center
radio is--center

Tags and placeholders

tag__20
is--active
${value__20}
Env type
App
Environment
Resource
tag__24
is--active
${value__24}

Lists and tables

Name
First
Second
Third

H3 list

text
text__sml
label
// list can be deleted only via confirmation dialog
Name
First
Second
text table__row
text__sml
label
// table row has quick deletion
Edit workload

H4 workload-name

Default
Status
Workload details
Workload status and pod details text.

External resources

Ingress

Service account

Containers
container name

Image

Variables

Files

Volume mounts

Container configuration

Preview workload

H4 workload-name

Default
Status

Statuses

change status
is--cta
is--alert
is--active
is--disabled
is--frozen
link__32