Paige's Design Library

Clamp and CSS Variables

If a design uses custom CSS, the code will be located in the advanced tab of the icon list widget above the design.

My outer container uses CSS variables and clamp values to control padding.

No need to edit the padding for various break sizes. Try re-sizing your browser window and watch my padding fluidly change.

Hero Heading

My outer container uses variables and clamp to define padding. For the bottom padding (padding-block-end), it uses calc() to add extra padding equivalent to the negative margin on the CTA section below.

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

CSS Variable for Border Radius

In this section, I used a CSS variable to control the radius on the cards, button and image. To change the border radius across the entire website, we would simply change the variable’s value.

Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem Ipsum Dolor

Dignissim duis magna habitant nam montes leo erat maecenas hendrerit, bibendum aenean quisque pharetra.