@onega-ui

Block sizes

w-content

text text text text text text

text text text
text text text

w-half

w-full

w-10

w-55

  <div class="d-block">
    <div class="box box-info w-content">w-content</div>
    <div class="box box-info w-content">text text text text text text</div>
    <div class="box box-info">text text text<br>text text text</div>
  </div>

  <div class="d-flex mt-1">
    <div class="box box-info w-half">w-half</div>
    <div class="box box-info w-full">w-full</div>
    <div class="box box-info w-10">w-10</div>
  </div>

  <div class="d-flex mt-1">
    <div class="box box-info w-10">w-10</div>
    <div class="box box-info w-55">w-55</div>
  </div>

w-content	Adjust the block size to match the width of the content.
w-screen	Adjust the block size to match the width of the screen.
w-full	Set block size to 100% width.
w-half	Set block size to 100% width.
w-5...95	Set the block size to 5%...95% of the width in 5% increments.
w-1rem...30rem	Set the block size to 1rem...30rem of the width in 1rem increments.
h-content	Adjust the block size to match the height of the content.
h-screen	Adjust the block size to match the height of the screen.
h-full	Set block size to 100% height.
h-half	Set block size to 100% height.
h-5...95	Set the block size to 5%...95% of the height in 5% increments.
h-1rem...30rem	Set the block size to 1rem...30rem of the height in 1rem increments.