PostHeader

WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.

PostHeader with some content for WordPress single page template

Lorem Ipsum

Tools & garage accessoriesLorem Ipsum

CNK-7/13/2023

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">PostHeader</span></span> <span class="line"><span style="color:#B392F0"> author</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{ { firstName: </span><span style="color:#9ECBFF">'Szymon'</span><span style="color:#E1E4E8">, name: </span><span style="color:#9ECBFF">'CNK'</span><span style="color:#E1E4E8"> } }</span></span> <span class="line"><span style="color:#B392F0"> lang</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"en"</span></span> <span class="line"><span style="color:#B392F0"> categories</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{ [{</span><span style="color:#9ECBFF">"name"</span><span style="color:#E1E4E8">:</span><span style="color:#9ECBFF">"Tools & garage accessories"</span><span style="color:#E1E4E8">,</span><span style="color:#9ECBFF">"uri"</span><span style="color:#E1E4E8">:</span><span style="color:#9ECBFF">"/category/garage/tools-garage-accessories/"</span><span style="color:#E1E4E8">}, , {</span><span style="color:#9ECBFF">"name"</span><span style="color:#E1E4E8">:</span><span style="color:#9ECBFF">"Lorem Ipsum"</span><span style="color:#E1E4E8">,</span><span style="color:#9ECBFF">"uri"</span><span style="color:#E1E4E8">:</span><span style="color:#9ECBFF">"#"</span><span style="color:#E1E4E8">}] }</span></span> <span class="line"><span style="color:#B392F0"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Lorem Ipsum"</span></span> <span class="line"><span style="color:#B392F0"> date</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"2023-07-13T01:35:03"</span></span> <span class="line"><span style="color:#B392F0"> image</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"https://placehold.co/1380x920"</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>

PostHeader - only title

Lorem Ipsum

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">PostHeader</span></span> <span class="line"><span style="color:#B392F0"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Lorem Ipsum"</span></span> <span class="line"><span style="color:#B392F0"> lang</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"en"</span></span> <span class="line"><span style="color:#B392F0"> image</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"https://placehold.co/1380x920"</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>

Props

Prop	Type	Default	Description
`title`*	`string`	`—`	Post title displayed as the main heading.
`image`	`string`	`—`	Hero image URL displayed behind/above the title.
`lang`	`string`	`—`	Language code used by date formatting (e.g. `en`, `pl`).
`date`	`string`	`—`	ISO 8601 publication date (e.g. `2023-07-13T01:35:03`).
`author`	`{ firstName: string; name: string }`	`—`	Post author — `name` is displayed, `firstName` populates the title attribute.
`categories`	`{ name: string; uri: string }[]`	`—`	Category objects rendered as links above the title.