Overlapping Content CTA
Every layout and setting this block supports. The first two examples are the production-ready patterns; the rest demonstrate individual settings.
Pattern — Content on Image (Dark)
Recommended. Image-left with a semi-transparent panel overlapping the photo on a dark section background.
SUCCESSFUL ENCOUNTERS
Historic Roots Contemporary Edge
Since the early 1900s, Hotel Perry has hosted innovators and leaders. We continue that tradition as a distinctive venue for corporate events.
Explore VenuesPattern — Accent Image (Light)
Recommended. A cropped accent image bleeds from the edge behind a natural-ratio photo on a light background.
Petoskey Perfection
Listed on the National Register of Historic Sites, Hotel Perry has been a pillar of first-class service for more than 120 years.
Discover MoreFill Column · Image Left
Default sizing: the image fills its column and the panel overlaps its right edge.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreFill Column · Image Right
Same as above with the image on the right; the panel overlaps from the left.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreNatural Size · Image Left
A small graphic (270px wide) set to Natural Size renders crisp at its own dimensions instead of being upscaled to fill the column. It hugs the panel side so the overlap still lands on it.
Sense and
SENSIBILITY
Experience the rich history of Mackinac Island while enjoying exceptional comfort and first-class service in four unique buildings.
View MoreNatural Size · Image Right
The same small graphic in Natural Size on the right side.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreAccent Background Image
An accent image anchored to the photo side, bleeding to the screen edge, with the photo on the right.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreNo Overlap
Overlap set to 0 for a clean side-by-side split with no overlap.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MorePanel Alignment — Top
Panel content anchored to the top of the column, pulled up with a panel offset.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MorePanel Alignment — Bottom
Panel content anchored to the bottom of the column, pushed down with a panel offset.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MorePer-Corner Image Radius
Asymmetric image corners: top-left and bottom-right rounded to 60px.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreImage Border Frame
A decorative gold border frame around the image: 3px thickness, 10px inner padding.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreAspect Ratio — 16:9
Fill Column locked to a 16:9 widescreen ratio regardless of the source image.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreImage Width — Extra Wide (8/4)
The image column spans 8 of 12 columns, leaving a narrow 4-column panel.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreImage Width — Narrow (6/6), Image Right
An even 50/50 split with the image on the right.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn MoreDark Background, Transparent Panel
Section background set to brand navy with light text and a transparent panel.
Hotel Perry
A distinctive Petoskey landmark with first-class service since the early 1900s.
Learn More