Header Semantic Tags

[nonfungibletunji]

Any Documentation? semnatic tags like section, header, article

  <section class="hero">
    <h1 class="hero-message">
      <div>Hero layout with</div>
      <div>Open Props</div>
    </h1>
    <p class="under-hero">Lorem ipsum dolor sit amet consectetu adipisicing elit. Nemo in doloremque quam, voluptatibus eum voluptatum.</p>
    <div class="button-list">
      <button class="primary">Get started</button>
      <button>Live demo</button>
    </div>
  </section>
  <picture class="promo-art">
    <img src="https://doodleipsum.com/700x700/outline?bg=3b5bdb" height="800" width="800" alt="a random doodle">
  </picture>
</header>

how would we convert this code.....

[sliemeobn]

hi, not quite sure what you are asking here 🤔

in terms of docs there is the readme and the DocC API docs (also hosted on swiftpackageindex)

however, every tag element in elementary is called exactly as in html, so this would roughly be like

section(.class("hero") {
  h1(.class("hero-message") {
    div { "Hero layout with" }
    // ... and so on
  }
}

same goes for attributes - names map 1:1. however, not every attribute has been defined in the swift model yet. PRs welcome ; )

it is a core design choice of elementary to NOT introduce another layout/semantic/UI-concept model, but to stay true to HTML. you can always build your own bespoke component library on top (that's the idea at least).