Content
Button (horicontal-aligned-center)
CODE
×
HTML
<div class='w100 center'> <button class='btn btn-primary'>Who we are</button> </div>
CSS
button.btn.btn-primary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw3); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); color: var(--fpb); background-color: var(--bsc2); border-color: var(--lsc2); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-primary:hover, button.btn.btn-primary:focus { border-color: var(--lsc1); background-color: var(--bsc1); color: var(--fsc2); } @media screen and (max-width: 991px) { button.btn.btn-primary { font-size: var(--fs-m); } } @media screen and (max-width: 575px) { button.btn.btn-primary { margin-top: 24px; } } @media screen and (max-width: 389px) { button.btn.btn-primary { width: 100%; } }
JS
Button (horicontal-aligned-center)
Last Edit: Oct 24, 2023, 3:13pm
×
Who we are
Table (responsive)
CODE
×
HTML
<div class='table'> <table class='table v1'><thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> <th scope="col">Link</th> </tr> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>https://www.snowflake.ch</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td>https://atomic-kitchen.com</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> <td>https://www.snowflake.ch</td> </tr> </tbody></table> </div>
CSS
@media screen and (max-width: 991px) { div.table { margin-top: calc(var(--fs-ll) * var(--lh-s) / 2); margin-bottom: calc(var(--fs-ll) * var(--lh-s) / 2); } } @media screen and (max-width: 575px) { div.table { margin-top: calc(var(--fs-l) * var(--lh-m) / 2); margin-bottom: calc(var(--fs-l) * var(--lh-m) / 2); } } table.table.v1 { max-width: var(--max-w); font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-xs); line-height: var(--lh-m); color: var(--fc2); margin-top: calc(var(--fs-l) * var(--lh-s) / 2); margin-bottom: calc(var(--fs-l) * var(--lh-s) / 2); } @media screen and (max-width: 991px) { table.table.v1 { font-size: var(--fs-xxs); margin-top: calc(var(--fs-m) * var(--lh-s) / 2); margin-bottom: calc(var(--fs-m) * var(--lh-s) / 2); } } @media screen and (max-width: 575px) { table.table.v1 { font-size: var(--fs-xxxs); margin-top: calc(var(--fs-s) * var(--lh-m) / 2); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } } .table > :not(caption) > * > * { background-color: transparent; } thead th { border-bottom: 1px solid var(--lc5) !important; font-weight: 500; } tbody > tr:last-of-type > * { border-color: transparent; }
JS
Table (responsive)
Last Edit: Oct 10, 2023, 1:09pm
×
#
First
Last
Handle
Link
1
Mark
Otto
@mdo
https://www.snowflake.ch
2
Jacob
Thornton
@fat
https://atomic-kitchen.com
3
Larry the Bird
@twitter
https://www.snowflake.ch