CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Sizing

Use responsive sizing utility classes to quickly apply widths and heights on elements.

Notation#

Sizing utility classes can be defined using the format -w-{breakpoint}--{value} for widths and -h-{breakpoint}--{value} for heights. Breakpoints supported are sm, md, lg, and xl.

Width#

Target all breakpoints#

Sizing utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints#

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Height#

Target all breakpoints#

Sizing utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints#

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Maximum width/height#

Using the format -mw--{value} for max-width and -mh--{value} for max-height