Desktop — Filled
Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.
About Agency
<section class="txds-hero txds-hero--filled">
<div class="txds-hero__inner">
<div class="txds-hero__content">
<h1 class="txds-hero__heading">Texas Department of Agency Online Services</h1>
<p class="txds-hero__text">Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.</p>
<a href="#" class="txds-hero__cta">About Agency</a>
</div>
<div class="txds-hero__image">
<img src="hero-family.png" alt="Father holding child">
</div>
</div>
</section>
Desktop — No Fill
Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.
About Agency
<section class="txds-hero txds-hero--open">
<div class="txds-hero__inner">
<div class="txds-hero__content">
<h1 class="txds-hero__heading">Texas Department of Agency Online Services</h1>
<p class="txds-hero__text">Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.</p>
<a href="#" class="txds-hero__cta">About Agency</a>
</div>
<div class="txds-hero__image">
<img src="hero-family.png" alt="Father holding child">
</div>
</div>
</section>
Responsive HTML + Media Query
Use one Hero HTML structure for desktop and mobile. CSS media queries control the layout shift.
<section class="txds-hero txds-hero--filled">
<div class="txds-hero__inner">
<div class="txds-hero__content">
<h1 class="txds-hero__heading">Texas Department of Agency Online Services</h1>
<p class="txds-hero__text">Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.</p>
<a href="#" class="txds-hero__cta">About Agency</a>
</div>
<div class="txds-hero__image">
<img src="/assets/images/photos/hero-family.png" alt="Father holding child">
</div>
</div>
</section>
<style>
/* Desktop default */
.txds-hero__inner {
display: flex;
gap: 32px;
align-items: center;
}
/* Mobile layout */
@media (max-width: 767px) {
.txds-hero__inner {
flex-direction: column;
gap: 0;
padding: 0;
}
.txds-hero__content {
width: 100%;
padding: 32px 24px;
}
.txds-hero__image {
width: 100%;
height: 266px;
border-radius: 0;
}
.txds-hero__cta {
width: 100%;
}
}
</style>
Mobile Variants (375px)
Filled
No Fill