The Division

Resize the window to see how the example divison layouts change.

Look inside this mdx-document to see the markup for the examples.

The divion groups related content together, and it creates a visual separation between different parts of a page.

By default it is rendered as a div element, but you can pass a tagName property if you want it to be a section or footer.

Variants

As with other components, you can set the variant of the division. If this attribute is not set, it will inherit the variant from the parent component.

Normal variant

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Alt variant

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Elevated variant

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Layouts

The division can have different layouts. Set the layout attribute to one of the following values:

_ 2

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

_ *

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

_ 1

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

1 2

Did you know?

Lions are the only cats that live in groups, which are called prides.

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

2 1

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

2 _

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

* _

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

1 _

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

*

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

*

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

The lion’s roar

The roar of a lion can be heard from up to 5 miles away. It is used to communicate with other members of the pride and to warn off potential rivals.

Pictures

Pictures works well with the Division component. Add class="fit" to the Picture component to make it fill the available space with preserved aspect ratio. Note that the image will never be wider than it’s original size.

A layout with a picture
A lion

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Division.Row

For more complex layouts one can use the Division.Row component. Instead of using the layout attribute directly on the Division component, you can wrap content inside the Row component, and then set the layout attribute on each row. This allows for more flexibility in the layout.

Two rows with different layouts. The first row has a picture that spans the full width. The second row has a `_ 2` layout.
A lion

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

By using Division.Row components you can add several rows for really complex layouts. When a complex layout is created, it’s likely you want to add override the default margins somewhere. Use utility classes for this.

An advanced division layout using several rows

The mighty lion

Lions are one of the most iconic animals in the world. Known as the "king of the jungle," they are powerful and majestic creatures that live in prides and are known for their strength and courage.

A lion

Did you know?

Lions are the only cats that live in groups, which are called prides.

The dominant male is a lazy fellow, he spends most of his time resting and watching over the pride. While the females do the majority of the hunting, the male’s primary role is to protect the pride from intruders and other threats.

As a lion cub grows, it learns to hunt by watching the adults. Cubs are usually weaned at around 6-7 months old, but they don’t start hunting until they are about a year old. They are dependent on their mothers for food until they are about 2 years old.

They hate hyenas

Lions and hyenas are natural enemies. They compete for food and territory, and they will often fight over a kill. Lions are usually the victors in these battles, but hyenas are known for their persistence and will often steal food from lions if they get the chance.

Hyenas are also known for their distinctive “laughing” call, which can be heard for miles around. This call is used to communicate with other members of the pack and to warn off potential rivals.

A hyena

A spotted hyena planning evil things.