Imagine we're having an App where we have 3-5 different needs for displaying Avatars: A page with different Sections (Chat, Content, Sidebar, Header, etc) which might include an Avatar in different sizes
This is how it looks in "Design World" -> https://www.figma.com/file/a4Yck5hlUwJ83XAULwIHVu/Component-Sample?node-id=0%3A1
The Avatar itself is a component that has 3 different size "Variants" (props :))
| Verifying my Blockstack ID is secured with the address 1A6Wnisd7cbMgWnkzGMRWrJwBfWVeJdNpE https://explorer.blockstack.org/address/1A6Wnisd7cbMgWnkzGMRWrJwBfWVeJdNpE |
| #!/bin/bash | |
| cname=$( awk -F: '/model name/ {name=$2} END {print name}' /proc/cpuinfo ) | |
| cores=$( awk -F: '/model name/ {core++} END {print core}' /proc/cpuinfo ) | |
| freq=$( awk -F: ' /cpu MHz/ {freq=$2} END {print freq}' /proc/cpuinfo ) | |
| tram=$( free -m | awk 'NR==2 {print $2}' ) | |
| swap=$( free -m | awk 'NR==4 {print $2}' ) | |
| up=$(uptime|awk '{ $1=$2=$(NF-6)=$(NF-5)=$(NF-4)=$(NF-3)=$(NF-2)=$(NF-1)=$NF=""; print }') | |
| echo "CPU model : $cname" |
I hereby claim:
To claim this, I am signing this object:
| {"palette" : { | |
| "lightBlack":"#2c2c2c", | |
| "lightBlackIntense":"#232323", | |
| "turquoise":"#00bf93", | |
| "turquoiseIntense":"#16a086", | |
| "mint":"#2dcc70", | |
| "mintIntense":"#27ae61", | |
| "green":"#42e453", | |
| "greenIntense":"#24c333", | |
| "yellow":"#ffff25", |
| $palette = array( | |
| 'lightBlack' => '#2c2c2c', | |
| 'lightBlackIntense' => '#232323', | |
| 'turquoise' => '#00bf93', | |
| 'turquoiseIntense' => '#16a086', | |
| 'mint' => '#2dcc70', | |
| 'mintIntense' => '#27ae61', | |
| 'green' => '#42e453', | |
| 'greenIntense' => '#24c333', | |
| 'yellow' => '#ffff25', |
| const palette = { | |
| lightBlack: '#2c2c2c', | |
| lightBlackIntense: '#232323', | |
| turquoise: '#00bf93', | |
| turquoiseIntense: '#16a086', | |
| mint: '#2dcc70', | |
| mintIntense: '#27ae61', | |
| green: '#42e453', | |
| greenIntense: '#24c333', | |
| yellow: '#ffff25', |
| // Allthings Colors | |
| $a-color-light-black: #2c2c2c; | |
| $a-color-light-black-intense: #232323; | |
| $a-color-turquoise: #00bf93; | |
| $a-color-turquoise-intense: #16a086; | |
| $a-color-mint: #2dcc70; | |
| $a-color-mint-intense: #27ae61; | |
| $a-color-green: #42e453; | |
| $a-color-green-intense: #24c333; |
| // Allthings Colors | |
| @a-color-light-black: #2c2c2c; | |
| @a-color-light-black-intense: #232323; | |
| @a-color-turquoise: #00bf93; | |
| @a-color-turquoise-intense: #16a086; | |
| @a-color-mint: #2dcc70; | |
| @a-color-mint-intense: #27ae61; | |
| @a-color-green: #42e453; | |
| @a-color-green-intense: #24c333; |
| <snippet> | |
| <content><![CDATA[ | |
| <snippet> | |
| <content> | |
| <![CDATA[${1:Write your snippet here}]]\> | |
| </content> | |
| <tabTrigger>${2:tabTrigger}</tabTrigger> | |
| <!-- Scope is optional --> | |
| <scope>${3:scope}</scope> | |
| <!-- Description is optional --> |
