3.0.0-alpha.7 Alpha
Default Default Classic Light Dark Light Dark System
Search /
Default Default Classic Light Dark Light Dark System
Style Utilities

Size

.wa-size-s .wa-size-m .wa-size-l Experimental

Size utilities give elements one of three preset sizes (small, medium, or large).

Some Web Awesome components, like <wa-button>, allow you to change their size to one of three presets: small, medium, and large by using a size attribute:

You can create the same effect on any element by using the size utility classes:

Using these classes does two things:

Custom Property Small Medium Large
--wa-size --wa-font-size-s --wa-font-size-m --wa-font-size-l
--wa-size-smaller --wa-font-size-xs --wa-font-size-s --wa-font-size-m
--wa-space --wa-space-s --wa-space-m --wa-space-l
--wa-space-smaller --wa-space-xs --wa-space-s --wa-space-m
--wa-form-control-height --wa-form-control-height-s --wa-form-control-height-m --wa-form-control-height-l

For example, assume we wanted to make a custom .tag class with size variants.

Default 
<span class="tag wa-size-s">Small</span>
<span class="tag">Default</span>
<span class="tag wa-size-m">Medium</span>
<span class="tag wa-size-l">Large</span>

<style>
  .tag {
	display: inline-block;
	padding: var(--wa-space-smaller) var(--wa-space);
	border-radius: var(--wa-border-radius-s); /* usually fixed across sizes */
	background-color: var(--wa-color-fill-quiet);
	border: 1px solid var(--wa-color-border-quiet);
	color: var(--wa-color-on-quiet);
  }
</style>

Advanced: Customizing Sizes

But what if you are creating a style that should generally be smaller (e.g. a badge) or larger (e.g. a pull quote)? For example, suppose we wanted to define a custom .tag2 class just like .tag in the previous section, but with a different set of sizes.

This is possible, though a bit more involved. The first thing you need to do is define these 8 properties in your CSS for your "breakpoints":

Custom property Default value
--size-xs var(--wa-font-size-xs)
--size-s var(--wa-font-size-s)
--size-m var(--wa-font-size-m)
--size-l var(--wa-font-size-l)
--space-xs var(--wa-space-xs)
--space-s var(--wa-space-s)
--space-m var(--wa-space-m)
--space-l var(--wa-space-l)

It would look like this:

.tag2 {
	--size-xs: var(--wa-font-size-2xs);
	--size-s: var(--wa-font-size-xs);
	--size-m: var(--wa-font-size-s);
	--size-l: var(--wa-font-size-m);

	--space-xs: var(--wa-space-2xs);
	--space-s: var(--wa-space-xs);
	--space-m: var(--wa-space-s);
	--space-l: var(--wa-space-m);
}

That by itself is sufficient to give you sizes when the utility classes are used, though no default size:

Default 
<span class="tag2 wa-size-s">Small</span>
<span class="tag2">Default</span>
<span class="tag2 wa-size-m">Medium</span>
<span class="tag2 wa-size-l">Large</span>

<style>
  .tag2 {
	--size-xs: var(--wa-font-size-2xs);
	--size-s: var(--wa-font-size-xs);
	--size-m: var(--wa-font-size-s);
	--size-l: var(--wa-font-size-m);

	--space-xs: var(--wa-space-2xs);
	--space-s: var(--wa-space-xs);
	--space-m: var(--wa-space-s);
	--space-l: var(--wa-space-m);

	display: inline-block;
	font-size: var(--wa-size); /* needed for the default size */
	padding: var(--wa-space-smaller) var(--wa-space);
	border-radius: var(--wa-border-radius-xs); /* usually fixed across sizes */
	background-color: var(--wa-color-fill-quiet);
	border: 1px solid var(--wa-color-border-quiet);
	color: var(--wa-color-on-quiet);
  }
</style>

Supporting a default size as well requires a little bit more plumbing:

Default 
<div>
	<span class="tag3 wa-size-s">Small</span>
	<span class="tag3">Default</span>
	<span class="tag3 wa-size-m">Medium</span>
	<span class="tag3 wa-size-l">Large</span>
</div>

<style>
  .tag3 {
	--size-xs: var(--wa-font-size-2xs);
	--size-s: var(--wa-font-size-xs);
	--size-m: var(--wa-font-size-s);
	--size-l: var(--wa-font-size-m);

	--space-xs: var(--wa-space-2xs);
	--space-s: var(--wa-space-xs);
	--space-m: var(--wa-space-s);
	--space-l: var(--wa-space-m);

	/* Default size assignments with 0 specificity */
	:where(&) {
		--wa-size: var(--size-m);
		--wa-size-smaller: var(--size-s);
		--wa-space: var(--space-m);
		--wa-space-smaller: var(--space-s);
	}

	display: inline-block;
	font-size: var(--wa-size); /* needed for the default size */
	padding: var(--wa-space-smaller) var(--wa-space);
	border-radius: var(--wa-border-radius-xs); /* usually fixed across sizes */
	background-color: var(--wa-color-fill-quiet);
	border: 1px solid var(--wa-color-border-quiet);
	color: var(--wa-color-on-quiet);
  }
</style>
    No results