Design

union.ai

Feb 8, 2024 — 2 min read

Clip Elements to Specific Shapes

The clip-path property is used to clip elements to specific shapes. The polygon function is used to create a polygon shape with four values for each side.

Angled Section

The angled-section class clips the element to a polygon shape with specific values for each side. It also adds padding to the top and bottom.

Angled Section Top

The angled-section-top class clips the element to a polygon shape with specific values for each side. It only adds padding to the top.

Angled Section Bottom

The angled-section-bottom class clips the element to a polygon shape with specific values for each side. It only adds padding to the bottom.

Make Text Crisper and More Legible

This CSS code improves the appearance of text in all browsers by smoothing the font and optimizing legibility.

This CSS code adds a focus state style for keyboard navigation to focusable elements. It adds an outline and outline offset.

Remove Margins on First and Last Elements

This CSS code removes the top margin on the first element in any rich text element and the bottom margin on the last element in any rich text element.

Disable and Enable Pointer Events

These CSS classes can be used to prevent or enable click and hover interaction with an element by setting the pointer-events property.

Create a Square Div

The div-square class creates a square div by maintaining a 1:1 dimension using the padding-bottom property.

Center Align Containers

The container-medium, container-small, and container-large classes ensure that containers never lose their center alignment by setting the margin-right and margin-left properties to auto.

Inherit Typography Styles

This CSS code allows certain elements to inherit typography styles from their parent, such as color, text decoration, and font size.

Apply Ellipsis After a Certain Number of Lines

These CSS classes can be used to apply an ellipsis (...) after a certain number of lines of text. The text-style-3lines class applies it after 3 lines, and the text-style-2lines class applies it after 2 lines.

Inline Flex Display

The display-inlineflex class adds an inline flex display to an element.

Hide Elements on Different Screen Sizes

These CSS classes can be used to hide elements on different screen sizes. The hide class hides the element on all screen sizes. The hide-tablet class hides it on screens with a maximum width of 991px. The hide-mobile-landscape class hides it on screens with a maximum width of 767px.