Hero

ส่วนหัวของหน้าเว็บ แสดงชื่อหน้า รูปภาพ และข้อความหลัก รองรับ 3 variations

Full Image

เหมาะกับหน้าแรก หน้าหลักที่มีรูป hero คุณภาพสูง

Previewhero-full-image

<section class="stk-hero stk-hero--full-image">  <div class="stk-hero__bg">    <img src="/hero-bg.jpg" alt="Company Name">  </div>  <div class="stk-hero__overlay"></div>  <div class="stk-hero__content">    <div class="container">      <h1 class="stk-hero__title">เกี่ยวกับเรา</h1>      <p class="stk-hero__subtitle">บริษัทชั้นนำด้านพลังงาน</p>    </div>  </div></section>

Split

เหมาะกับหน้า about, vision-mission ที่มี text เยอะ

Previewhero-split

<section class="stk-hero stk-hero--split">  <div class="container">    <div class="row align-items-center g-5">      <div class="col-lg-6">        <h1 class="stk-hero__title">เกี่ยวกับเรา</h1>        <p class="stk-hero__description">          บริษัท ABC จำกัด (มหาชน) ก่อตั้งเมื่อปี 2533        </p>        <a href="#" class="stk-btn stk-btn--primary">อ่านเพิ่มเติม</a>      </div>      <div class="col-lg-6">        <img src="/about.jpg" alt="About" class="img-fluid rounded">      </div>    </div>  </div></section>

Minimal

เหมาะกับหน้า sub ทั่วไป ไม่ต้องการ hero เด่น

Previewhero-minimal

<section class="stk-hero stk-hero--minimal">  <div class="container">    <h1 class="stk-hero__title">วิสัยทัศน์และพันธกิจ</h1>    <p class="stk-hero__subtitle">Vision & Mission</p>  </div></section>

Props / Content Fields

Field	Type	Required	Description
`title`	string	✓	หัวข้อหลัก
`subtitle`	string	-	หัวข้อรอง
`description`	string	-	คำอธิบายยาว (hero-split)
`image`	string	-	URL รูปภาพ
`cta_text`	string	-	ข้อความปุ่ม CTA
`cta_link`	string	-	ลิงก์ปุ่ม CTA

Dependencies

ไม่มี — ใช้ได้เลยไม่ต้อง import JS เพิ่ม

CSS Classes

.stk-hero                  /* base */
.stk-hero--full-image      /* variation: full image */
.stk-hero--split           /* variation: split */
.stk-hero--minimal         /* variation: minimal */
.stk-hero__bg              /* background wrapper */
.stk-hero__overlay         /* dark overlay */
.stk-hero__content         /* content wrapper */
.stk-hero__title           /* heading */
.stk-hero__subtitle        /* subheading */
.stk-hero__description     /* long text (split) */