Boxes (Advanced)
0001-01-01
Boxes are used to highlight content and make page layouts more interesting. Box designs will tend to vary quite a bit from site to site, but we provide some standard design classes out of the box.
Table of Contents
Box
Boxes with Background Colors
Special Box Styles
A Highlight Box - This is a Heading in a Box
box box-highlight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
Boxes with Helper Classes
Shapes of boxes can be adjusted
To centre the text in the shape, put it in a box on its own within the shape.
Shape Ratio
>
Square 1x1
box bg-color-1 ratio-1x1 text-center
Rectangle 2x3
box bg-color-1 ratio-2x3 text-center
Rectangle 3x4
box bg-color-1 ratio-3x4 text-center
Rectangle 16x9
box bg-color-1 ratio-16x9 text-center
Rectangle 21x9
box bg-color-1 ratio-21x9 text-center
Rectangle 21x5
box bg-color-1 ratio-21x5 text-center
By default images in a ratio block will "cover" the ratio space from the center outwards, meaning that one of the image dimensions (width or height) will touch both edges of the ratio block (left/right or top/bottom) and the other dimension will expand outward from the center as needed, cropping off parts of the image that don't fit into the box.
To do: In the near futurue we'll add the ability to position elements within the ratio blocks in different ways (top, bottom , left, right, center, etc.) but this isn't available yet.
Note: Earlier versions of Acora required adding "fill width" or "fill height" to certain images to make sure it covered the ratio space, but this is no longer required and in fact will produce a broken layout effect from 10.6.1 onwards. Existing content will need to be changed.
Original image:
Putting ratios around the image:
Images with captions are problematic inside ratio divs in 10.5.1, this will be addressed in the future:
Hey, this is cool:
Happy Holidays
You can put content in a box over an image.
Rounded Corners
- Rounded
- least
- less
- more
- most
Square 1x1 Rounded Less
box bg-color-1 ratio-1x1 text-center rounded-less
Square 3x2 Rounded
box bg-color-1 ratio-3x2 text-center rounded
Square 2x3 Rounded More
box bg-color-1 ratio-2x3 text-center rounded-more
Ellipse
- Ellipse will work with any of the ratios above
Ellipse 1x1
box bg-color-1 ratio-1x1 ellipse text-center
Ellipse 2x3
box bg-color-1 ratio-2x3 ellipse text-center
Ellipse 3x4
box bg-color-1 ratio-3x4 ellipse text-center
Ellipse 16x9
box bg-color-1 ratio-16x9 ellipse text-center
Ellipse 21x9
box bg-color-1 ratio-21x9 ellipse text-center
Ellipse 21x5
box bg-color-1 ratio-21x5 ellipse text-center
Pills and Shapes with Ratios
Pill
bg-color-1 ratio-16x9 pill text-center
Shape #1
bg-color-1 ratio-1x1 shape-1 text-center
Arch
bg-color-1 ratio-1x1 shape-arch text-center
Combinations of classes and styles can be used
The first two columns below apply styling to the columns in the columns block, and the next three apply styling to boxes inside the columns.
Simple Online Solution
Fast, low-effort and objective feedback, specific to your business.
What's Really Happening
Identifying current and emerging challenges and obstructions to progress.
Who Actually Matters
Addressing the needs of people that matter most to your business.
Right Actions - Right Now
Straightforward direction on today's priorities for your busness future.
Flexible and Economical
Low-cost access available
when and as often as you
need.
Padding and Margins can be adjusted
Color #1 Background
box box-wide padding-thickest padding-bottom-none padding-thin-medium padding-bottom-none-medium margin-bottom-thickest bg-color-1
This text has a link in it for testing.
This is a Heading in a Box
box bg-color-1-light padding-thick margins-none text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
- Duis blandit,
- lectus in dapibus iaculis,
- massa leo tempus leo,
- quis lacinia ligula orci vitae libero.
In vehicula laoreet ullamcorper. Aenean dapibus quam sit amet elit accumsan posuere. Vivamus lacinia ultricies ante id porttitor. Sed fermentum molestie laoreet. Aenean malesuada vel mauris ac eleifend.
Box Styles and Related Classes Can Be Used on Columns
Content in a Column Box
col padding box-border
This text has a link in it for testing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
This is Content in a Box
col padding-thick margins-none box-highlight
ivamus lacinia ultricies ante id porttitor. Sed fermentum molestie laoreet.
More Content in a Column Box
col padding-thick bg-color-1-light
This text has a link in it for testing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
Box Inside a Column
This text has a link in it for testing. Columns are the same height by default so column box layouts are too (like the first three columns in this example). But a box can be placed inside a column and it'll take on its own height.