Amara
Founder and lead architect. Amara started the studio in 2012 and still draws every first sketch by hand.
Content Panel puts several panels side by side. Click or hover a panel and it opens to show its title, text, a button and social icons. Use it for team members, services or an image gallery.
Four Content Panels with different settings: a team page that opens on click, walking holidays that open on hover and autoplay, a boutique lookbook with wider closed panels and a photo gallery with hidden titles. Click or hover over the panels to open them.
Open on: Click, with the first panel set to Active. Rotate Title turns the closed titles on their side. Each open panel shows a short bio and email and phone icons.
Founder and lead architect. Amara started the studio in 2012 and still draws every first sketch by hand.
Interior designer. Freya chooses the materials, colours and lighting for every home we build.
Project manager. Daniel keeps builders, budgets and planning officers on the same page.
Landscape architect. Nia designs the gardens, courtyards and green roofs around our buildings.
Junior architect. Isla joined us from university and now leads our 3D models and planning drawings.
Open on: Hover, with autoplay every 4 seconds. Hover a panel to open it and autoplay waits. Upright titles near the bottom and a button in each panel.
Eight days of hut-to-hut walking with a mountain guide. June to September.
A tough week for fit walkers, with long days above the tree line.
Cliff paths and quiet coves, staying in small harbour inns each night.
Island hopping by ferry, with a new walk and a new island every day.
Inactive Panel Size: 2, so closed panels stay wide enough to show the photo. Titles are upright and the content is a single line.
Bright wool coats and silk scarves for the first warm days of spring.
Loose tracksuits and pleated skirts in soft purple and teal.
Relaxed layers and white trainers for weekends in the city.
Denim with bold floral prints and a pop of pink.
Hide Inactive Title is on, so closed panels show only the photo. Open on: Hover, no autoplay and a short caption in each open panel.
Golden retriever, 4. Shot in the woods on an autumn morning.
Bernese mountain dog, 2. A studio session against a sky-blue backdrop.
Siamese cat, 6. She sat still for exactly one frame.
Golden retriever puppy, 1. Our fastest ever sitter on the beach.
Beagle puppy, 12 weeks. Her first ever photo shoot.
Add your panels, choose how they open, then style them.
Add as many panels as you need. Give each one a title, content, a background image and an optional button and social icons.
Set Open on to Click or Hover, mark any panel as Active to start it open, and turn on autoplay if you want the panels to cycle.
Set the height, title typography, colours and the breakpoint where the panels stack vertically.
Everything is set per panel or for the whole element in the Breakdance editor.
Add as many panels as you like with the repeater. Each has its own title, rich text content and background image.
Panels open when clicked, or open on hover and close again when the mouse leaves.
Turn on Active for a panel so it is already open when the page loads.
Add a button and a row of linked social icons to each panel. They show when the panel is open.
Cycle through the panels automatically at a speed you set. Autoplay pauses for a moment when a visitor interacts.
Style active and inactive titles separately, set the title position, rotate inactive titles or hide them.
Set an overlay, a highlight colour and a solid or gradient inner overlay.
Set the element height per breakpoint and how wide inactive panels are.
Choose the breakpoint where the panels stack vertically, or never stack them.
Any set of short items where one should take the focus at a time.
Show each team member with a photo, short bio and social links.
List your services side by side and open one to read more.
Use background images to build a compact gallery that expands on click or hover.
Show a few projects with a button to the full case study.
Give each range a panel with an image and a link to the category.
Show locations with a photo and a short description.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Panel | Repeater of panels. | 2 panels |
| Title | Panel title. Shown on the closed panel and as the heading of the open panel. | — |
| Content | Rich text shown when the panel is open. | — |
| Background Image | Image behind the panel. | — |
| Active | Start this panel open. | Off |
| Button | Optional button inside the open panel. | — |
| Social Icons | Repeater of icons with links, shown at the bottom of the open panel. | — |
| Open on | Click or Hover. | Click |
| Autoplay | ||
| Autoplay | Open the panels one after another on a timer. | Off |
| Speed | Time between panels in milliseconds. | 3000 |
| Size | ||
| Height | Height of the element, per breakpoint. | 500px |
| Content design | ||
| Active Title Typography | Text style of the open panel title. | — |
| Inactive Title Typography | Text style of closed panel titles. | 28px, uppercase, white |
| Content Typography | Text style of the panel content. | 16px, white |
| Button | Button design. | — |
| Hide Inactive Title | Hide titles on closed panels. | Off |
| Title Position | Vertical position of the closed panel title, per breakpoint. | 85% |
| Rotate Title | Turn closed panel titles on their side. | Off |
| Inactive Panel Size | Width of closed panels compared with the open one, from 1 to 5. Set a value, as it has no default. | — |
| Responsive Options | ||
| Stack Vertically | Breakpoint where panels stack: tablet landscape, tablet portrait, mobile landscape, mobile portrait or never. | Tablet Portrait |
| Colors | ||
| Overlay | Colour laid over every panel image. | #00000040 |
| Highlight | Colour laid over a panel when the mouse is over it. | #FFFFFF12 |
| Inner Overlay | Solid or gradient overlay on the open panel. | Dark gradient |
As many as you like. Each row in the Panel repeater becomes a panel.
Yes. Turn on Active for that panel and it starts open.
The panels stack vertically from the breakpoint you choose in Stack Vertically. The default is tablet portrait. You can also set a different height per breakpoint.
It pauses. When a visitor hovers or clicks a panel, autoplay waits for twice the speed setting before it carries on.
Yes. Add a background image to each panel, keep the content short and turn on Hide Inactive Title. The pet photographer demo above is built that way.
Content Panel is included with Phox Elements, along with 140+ other premium elements for Breakdance.