Card Components Showcase
Explore our collection of responsive card layouts: content cards, glass effects, square cards with structured layout (text top 50%, image bottom 50%), lightbox views, and interactive elements. Each component adapts beautifully to different screen sizes and interaction methods.
Content Cards Responsive
Automatically adapts: Wide layout on desktop, mobile layout on tablets/phones • Navigate with arrow keys or swipe
Naturstein - Kanfanar
Kalkstein mit warmen Beige- bis Grautönen. Elegante, widerstandsfähige Oberfläche für Innen- und Außenbereiche.
Eichenholz - Parkett
Zeitloses Eichenparkett: warm, strapazierfähig und langlebig – ideal für Wohnräume und stark genutzte Bereiche.
Feinsteinzeug - Schiefer
Robustes Feinsteinzeug in Schieferoptik: trittfest, feuchtigkeitsbeständig und edel in Anthrazit bis Tiefgrau.
Lärche-Fassade
Lärchenlattung: warm, witterungsbeständig, entwickelt edle Patina. Zeitlose, nachhaltige Fassadengestaltung.
Verbundplatten - Schwarz
HPL-Verbundplatten: wetterfest, UV-stabil, kratz- und schlagfest. Pflegeleicht und langlebig für moderne Fassaden.
Verbundplatten - Weiß
HPL-Verbundplatten in Weiß: wetterfest, UV-stabil und kratzfest. Pflegeleicht, langlebig und ideal für klare, moderne Fassaden.
Trapezblech - Schwarz
Robustes Trapezblech: hohe Tragfähigkeit, geringes Gewicht, wetterfest und langlebig – ideal für Dach und Fassade.
Eiche - Innenverkleidung
Echte Eiche für warme, natürliche Räume. Widerstandsfähig, pflegeleicht und ideal für den täglichen Gebrauch.
Lärche - Innenverkleidung
Lärchenholz mit lebendiger Maserung und warmen Tönen. Gemütlich, leicht zu verarbeiten und raumklimafreundlich.
Fichte - Innenverkleidung
Helle Fichte für freundliche, weite Räume. Natürlich, feuchtigkeitsregulierend und vielseitig im Innenraum einsetzbar.
Fichte - Konstruktion
BSH-Fichte: formstabil, tragfähig, rissarm. Nachhaltig produziert, präzise gefertigt, wiederverwendbar und recyclingfähig.
Isolierung - Dämmplatten
Holzfaser-Dämmplatten: starker Wärme- und Hitzeschutz, diffusionsoffen, klimaregulierend, nachhaltig und recycelbar.
OSB - Konstruktion
OSB‑Platten: druck- und biegefest, formstabil, ressourcenschonend. Langlebig, wiederverwendbar und gut recyclebar.
Planungspakete Cards
Planning packages with pricing information • Grid layout for easy comparison
Content Cards Static
Single responsive card: Wide layout on desktop, mobile layout on tablets/phones
Naturstein - Kanfanar
Kalkstein mit warmen Beige- bis Grautönen. Elegante, widerstandsfähige Oberfläche für Innen- und Außenbereiche.
Konfigurationen Video Card
Video card with direct props • Wide layout on desktop, mobile layout on tablets/phones
Du hast die Wahl
Gestalte dein Zuhause so individuell wie dein Leben. In unserem Online-Konfigurator wählst du Größe, Materialien, Ausstattung und Optionen Schritt für Schritt aus. Jede Entscheidung zeigt dir sofort, wie dein Haus aussieht und was es kostet.
So erhältst du volle Transparenz und ein realistisches Bild, wie dein Hoam-House zu deinen Wünschen, deinem Grundstück und deinem Budget passt.
Transportabilitaet Video Card
Video content with 16:9 aspect ratio on desktop, 16:10 on mobile • Same text space as content cards
Unsere Technik
Aufbauen. Mitnehmen. Weitergeben.
Ganz wie du willst. Dank hochpräziser Konstruktion entsteht dein Zuhause in kürzester Zeit, an nahezu jedem Ort. Und wenn du weiterziehst? Dann ziehst du nicht nur um, sondern nimmst dein Zuhause einfach mit. Oder du bleibst flexibel und verkaufst es weiter, so wie ein gut gepflegtes Auto.
Square Text Cards (Text-Icon Layout)
Square cards with text and optional icons • Navigate with arrow keys or swipe
Entwurf
Fenster, Türen, Innenwände
Bevor wir starten, prüfen wir gemeinsam die Machbarkeit deines Projekts auf deinem Grundstück. Im Entwurfsplan legen wir Fenster, Türen und Innenwände nach deinen Wünschen fest und stimmen diese Planung mit der zuständigen Gemeinde ab.
2. Einreichplanung
Zwei Wege zum Ziel
Nach dem Entwurf erstellen wir die komplette Einreichplanung und reichen diese bei der zuständigen Gemeinde ein. Ab hier hast du die Wahl, wie du mit der Bestellung deines Hoames fortfährst.
3. Positiver Baubescheid
Grundstücksvorbereitung & Fundament
Sobald dein Baubescheid vorliegt, startet die Vorbereitung deines Grundstücks. Dazu gehören alle notwendigen Erschließungsarbeiten wie Strom- und Wasseranschluss, Kanal sowie die Zufahrt.
Content Cards Responsive Glass
Automatically adapts: Wide layout on desktop, mobile layout on tablets/phones • Navigate with arrow keys or swipe
Naturstein - Kanfanar
Kalkstein mit warmen Beige- bis Grautönen. Elegante, widerstandsfähige Oberfläche für Innen- und Außenbereiche.
Eichenholz - Parkett
Zeitloses Eichenparkett: warm, strapazierfähig und langlebig – ideal für Wohnräume und stark genutzte Bereiche.
Feinsteinzeug - Schiefer
Robustes Feinsteinzeug in Schieferoptik: trittfest, feuchtigkeitsbeständig und edel in Anthrazit bis Tiefgrau.
Lärche-Fassade
Lärchenlattung: warm, witterungsbeständig, entwickelt edle Patina. Zeitlose, nachhaltige Fassadengestaltung.
Verbundplatten - Schwarz
HPL-Verbundplatten: wetterfest, UV-stabil, kratz- und schlagfest. Pflegeleicht und langlebig für moderne Fassaden.
Verbundplatten - Weiß
HPL-Verbundplatten in Weiß: wetterfest, UV-stabil und kratzfest. Pflegeleicht, langlebig und ideal für klare, moderne Fassaden.
Trapezblech - Schwarz
Robustes Trapezblech: hohe Tragfähigkeit, geringes Gewicht, wetterfest und langlebig – ideal für Dach und Fassade.
Eiche - Innenverkleidung
Echte Eiche für warme, natürliche Räume. Widerstandsfähig, pflegeleicht und ideal für den täglichen Gebrauch.
Lärche - Innenverkleidung
Lärchenholz mit lebendiger Maserung und warmen Tönen. Gemütlich, leicht zu verarbeiten und raumklimafreundlich.
Fichte - Innenverkleidung
Helle Fichte für freundliche, weite Räume. Natürlich, feuchtigkeitsregulierend und vielseitig im Innenraum einsetzbar.
Fichte - Konstruktion
BSH-Fichte: formstabil, tragfähig, rissarm. Nachhaltig produziert, präzise gefertigt, wiederverwendbar und recyclingfähig.
Isolierung - Dämmplatten
Holzfaser-Dämmplatten: starker Wärme- und Hitzeschutz, diffusionsoffen, klimaregulierend, nachhaltig und recycelbar.
OSB - Konstruktion
OSB‑Platten: druck- und biegefest, formstabil, ressourcenschonend. Langlebig, wiederverwendbar und gut recyclebar.
Content Cards Static Glass
Single responsive glass card: Wide layout on desktop, mobile layout on tablets/phones
Naturstein - Kanfanar
Kalkstein mit warmen Beige- bis Grautönen. Elegante, widerstandsfähige Oberfläche für Innen- und Außenbereiche.
Image Glass Card (Image-Only Layout)
Single image card with glass morphism effect
Square Glass Card (Square Layout)
Square card with title/subtitle/description (top) and image with 2:3 aspect ratio (bottom)
HOAM-House Design
Modern Alpine Architecture
Innovative modular design combining traditional alpine aesthetics with contemporary sustainability.
Square Glass Cards Scroll
Each card: title/subtitle/description (top) + image with 2:3 ratio (bottom) • Navigate with arrow keys or swipe
Naturstein - Kanfanar
Kalkstein mit warmen Beige- bis Grautönen. Elegante, widerstandsfähige Oberfläche für Innen- und Außenbereiche.
Eichenholz - Parkett
Zeitloses Eichenparkett: warm, strapazierfähig und langlebig – ideal für Wohnräume und stark genutzte Bereiche.
Feinsteinzeug - Schiefer
Robustes Feinsteinzeug in Schieferoptik: trittfest, feuchtigkeitsbeständig und edel in Anthrazit bis Tiefgrau.
Lärche-Fassade
Lärchenlattung: warm, witterungsbeständig, entwickelt edle Patina. Zeitlose, nachhaltige Fassadengestaltung.
Verbundplatten - Schwarz
HPL-Verbundplatten: wetterfest, UV-stabil, kratz- und schlagfest. Pflegeleicht und langlebig für moderne Fassaden.
Verbundplatten - Weiß
HPL-Verbundplatten in Weiß: wetterfest, UV-stabil und kratzfest. Pflegeleicht, langlebig und ideal für klare, moderne Fassaden.
Trapezblech - Schwarz
Robustes Trapezblech: hohe Tragfähigkeit, geringes Gewicht, wetterfest und langlebig – ideal für Dach und Fassade.
Eiche - Innenverkleidung
Echte Eiche für warme, natürliche Räume. Widerstandsfähig, pflegeleicht und ideal für den täglichen Gebrauch.
Lärche - Innenverkleidung
Lärchenholz mit lebendiger Maserung und warmen Tönen. Gemütlich, leicht zu verarbeiten und raumklimafreundlich.
Fichte - Innenverkleidung
Helle Fichte für freundliche, weite Räume. Natürlich, feuchtigkeitsregulierend und vielseitig im Innenraum einsetzbar.
Fichte - Konstruktion
BSH-Fichte: formstabil, tragfähig, rissarm. Nachhaltig produziert, präzise gefertigt, wiederverwendbar und recyclingfähig.
Isolierung - Dämmplatten
Holzfaser-Dämmplatten: starker Wärme- und Hitzeschutz, diffusionsoffen, klimaregulierend, nachhaltig und recycelbar.
OSB - Konstruktion
OSB‑Platten: druck- und biegefest, formstabil, ressourcenschonend. Langlebig, wiederverwendbar und gut recyclebar.
Glass Quote Cards
Quote-style cards with glass background and mixed bold/gray text • Perfect for testimonials and impactful statements
Wir sind registrierter Baumeister-Betrieb in Österreich
Mitglieder der Bundesinnung Bau, die über eine Gewerbeberechtigung für das Baumeistergewerbe verfügt.
Ein zukunftsweisendes Projekt, welches in den Bereichen Nachhaltigkeit, Ökologie und auch vom technischen Ansatz herausragend ist!
Assoc. Prof. Dipl-Ing. Dr. Techn.
Milena Stravic
Einfache Umsetzung und gleichzeitig hochwertige und extrem belastbare Ausführung.
Holzbaumeister
Franz Sobitsch
Wegweisend in Technologie und nachhaltigem Bauen. Hoam setzt neue Maßstäbe für die Zukunft.
WKO Steiermark
Von Jury gekürt
Button Components
Various button styles and variants
Button System Showcase
All Button Variants (Fixed Width)
Size Variations (Primary)
Landing Page Buttons (on dark background)
Common Button Combinations
Usage Instructions
How to use buttons in your code:
import { Button } from '@/components/ui';
// Basic usage (all buttons have fixed width)
<Button variant="primary">Click me</Button>
// With size
<Button variant="configurator" size="lg">
Configure Now
</Button>
// With click handler
<Button variant="success" onClick={handleClick}>
Save Changes
</Button>
// Custom styling
<Button variant="outline" className="custom-class">
Custom Button
</Button>