Website Building Kit Documentation

Basic Elements White

Headlines

Headline (H1)

# Headline (H1)

Headline (H2)

## Headline (H2)

Headline (H3)

### Headline (H3)

Headline (H4)

#### Headline (H4)
Headline (H5)
##### Headline (H5)
Headline (H6)
###### Headline (H6)

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt eros nec felis fringilla, quis accumsan dui pulvinar. Vestibulum lorem tortor. (p) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt eros nec felis fringilla, quis accumsan dui pulvinar. Vestibulum lorem tortor. (p) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt eros nec felis fringilla, quis accumsan dui pulvinar. Vestibulum lorem tortor. (p)

Buttons

parameters

style … sets the style of the button

possible values: primary, accent, nofill, nofilldark

text … sets the text on the button
onclick … sets the onclick event of the button
buttoncount … if you want to have two buttons next to each other

none (default), 2

style2 … sets the style of the second button
text2 … sets the text on the second button
onclick2 … sets the onclick event of the second button

primary example

{{% kit-button style="primary" text="primary" %}}

accent example

{{% kit-button style="accent" text="accent" %}}

nofill example

{{% kit-button style="nofill" text="nofill" %}}

two buttons example

{{% kit-button style="primary" text="Get Started" buttoncount="2" style2="nofill" text2="Learn More"%}}

parameters

example

Learn More

{{% kit-link href="/buildingkitdocu" %}}
Learn More
{{% /kit-link %}}

parameters

default: I agree to the

default: Terms & Conditions

examples

I agree to some Terms & Conditions

[{{% kit-termsandconditions text="I agree to some" linktext="Terms & Conditions" href="" %}}

I agree to the Terms & Conditions

{{% kit-termsandconditions href="" %}}

Form Elements






Download Ebook Form

parameters

style … sets the style to either white or dark

white (default), dark

header … header text
text … subheader text
buttontext … button text

Become an ASO Guru.

Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.







{{% kit-ebookform style="white" header="Become an ASO Guru." text="Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business." buttontext="Download Ebook Now" %}}

List

parameters

icon … bullet point of the list

success (default), warning, danger

color … the color of the bullet point

green (default), yellow, red, primary, accent

align … sets the alignment of the list

left (default), center, right

  • List item 1
  • List item 2
  • List item 3

{{% kit-list %}}
- List item 1
- List item 2
- List item 3
{{% /kit-list %}}

  • Dangerous list item 1
  • Dangerous list item 2
  • Dangerous list item 3

{{% kit-list  align="center" icon="danger" color="red"%}}
- Dangerous list item 1
- Dangerous list item 2
- Dangerous list item 3
{{% /kit-list %}}

Basic Elements Dark

Headlines

Headline (H1)

# Headline (H1)

Headline (H2)

## Headline (H2)

Headline (H3)

### Headline (H3)

Headline (H4)

#### Headline (H4)
Headline (H5)
##### Headline (H5)
Headline (H6)
###### Headline (H6)

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt eros nec felis fringilla, quis accumsan dui pulvinar. Vestibulum lorem tortor. (p) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt eros nec felis fringilla, quis accumsan dui pulvinar. Vestibulum lorem tortor. (p) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt eros nec felis fringilla, quis accumsan dui pulvinar. Vestibulum lorem tortor. (p)

Buttons

parameters

style … sets the style of the button

possible values: primary, accent, nofill, nofilldark

text … sets the text on the button
onclick … sets the onclick event of the button
buttoncount … if you want to have two buttons next to each other

none (default), 2

style2 … sets the style of the second button
text2 … sets the text on the second button
onclick2 … sets the onclick event of the second button

primary example

{{% kit-button style="primary" text="primary" %}}

accent example

{{% kit-button style="accent" text="accent" %}}

nofilldark example

{{% kit-button style="nofilldark" text="nofilldark" %}}

two buttons example

{{% kit-button style="accent" text="Get Started" buttoncount="2" style2="nofilldark" text2="Learn More"%}}

parameters

example

Learn More

{{% kit-link href="/buildingkitdocu" %}}
Learn More
{{% /kit-link %}}

parameters

default: I agree to the

default: Terms & Conditions

examples

I agree to some Terms & Conditions

{{% kit-termsandconditions text="I agree to some" linktext="Terms & Conditions" href="" %}}

I agree to the Terms & Conditions

{{% kit-termsandconditions href="" %}}

Formfields






Download Ebook Form

parameters

style … sets the style to either white or dark

white (default), dark

header … header text
text … subheader text
buttontext … button text

Become an ASO Guru.

Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.







{{% kit-ebookform style="white" header="Become an ASO Guru." text="Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business." buttontext="Download Ebook Now" %}}

List

parameters

style … sets the style of the list

white (default), dark

icon … bullet point of the list

success (default), warning, danger

color … the color of the bullet point

green (default), yellow, red, primary, accent

align … sets the alignment of the list

left (default), center, right

  • List item 1
  • List item 2
  • List item 3

{{% kit-list style="dark"%}}
- List item 1
- List item 2
- List item 3
{{% /kit-list %}}

  • Dangerous list item 1
  • Dangerous list item 2
  • Dangerous list item 3

{{% kit-list  align="center" icon="danger" color="red" style="dark"%}}
- Dangerous list item 1
- Dangerous list item 2
- Dangerous list item 3
{{% /kit-list %}}

Images

parameters

src, src2x … sets the destination of the image and image2x
alt … sets the alternate text for an image
screenshot … true if the image is a screenshot

false (default), true

swiperslide … true if the image is part of a swiper

false (default), true

{{% kit-image src="/img/layout/maintain-928ea62ec8.svg" src2x="/img/layout/maintain-928ea62ec8.svg" %}}


{{% kit-image src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" screenshot="true"%}}

Logo image

parameters

src, src2x … sets the destination of the image and image2x
mobile … defines whether the logo should be hidden in the mobile view or not

show (default), hide

{{% kit-logo src="/img/logos/itranslate-f24db8c49f.svg" src2x="/img/logos/itranslate@2x-41292939e8.png"%}}

{{% kit-logo src="/img/logos/itranslate-f24db8c49f.svg" src2x="/img/logos/itranslate@2x-41292939e8.png" mobile="hide"%}}

Logo Wall

parameters

style … used to adapt to the panel style

white (default), dark

header … header text

Trusted by successful apps and businesses.

{{% kit-logowall header="Trusted by successful apps and businesses."%}}
{{% kit-logo src="/img/logos/itranslate-f24db8c49f.svg" src2x="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% kit-logo src="/img/logos/microsoft-0a015f5674.png" src2x="/img/logos/microsoft@2x-40eb70d287.png"%}}
{{% kit-logo src="/img/logos/tinder-6434dbe3f2.png" src2x="/img/logos/tinder@2x-9298486b8e.png"%}}
{{% kit-logo src="/img/layout/testpage/the-aso-co-2edc9e0fdb.png" src2x="/img/layout/testpage/the-aso-co@2x.png" mobile="hide"%}}
{{% kit-logo src="/img/layout/testpage/pspdfkit-a60a89a4e6.png" src2x="/img/layout/testpage/pspdfkit@2x.png" mobile="hide"%}}
{{% kit-logo src="/img/logos/willhaben-6b3eb6adbc.png" src2x="/img/logos/willhaben@2x-a7c0c8e3c6.png"%}}
{{% kit-logo src="/img/logos/tripwolf-ccfc37f5de.png" src2x="/img/logos/tripwolf@2x-b93c9a2721.png" mobile="hide"%}}
{{% kit-logo src="/img/logos/stylight-2208d580c8.png" src2x="/img/logos/stylight@2x-41ec506b32.png" mobile="hide"%}}
{{% /kit-logowall %}}

Trusted by successful apps and businesses.

{{% kit-logowall header="Trusted by successful apps and businesses."%}}
{{% kit-logo src="/img/logos/itranslate-f24db8c49f.svg" src2x="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% kit-logo src="/img/logos/microsoft-0a015f5674.png" src2x="/img/logos/microsoft@2x-40eb70d287.png"%}}
{{% kit-logo src="/img/logos/tinder-6434dbe3f2.png" src2x="/img/logos/tinder@2x-9298486b8e.png"%}}
{{% kit-logo src="/img/layout/testpage/the-aso-co-2edc9e0fdb.png" src2x="/img/layout/testpage/the-aso-co@2x.png" mobile="hide"%}}
{{% kit-logo src="/img/layout/testpage/pspdfkit-a60a89a4e6.png" src2x="/img/layout/testpage/pspdfkit@2x.png" mobile="hide"%}}
{{% kit-logo src="/img/logos/willhaben-6b3eb6adbc.png" src2x="/img/logos/willhaben@2x-a7c0c8e3c6.png"%}}
{{% kit-logo src="/img/logos/tripwolf-ccfc37f5de.png" src2x="/img/logos/tripwolf@2x-b93c9a2721.png" mobile="hide"%}}
{{% kit-logo src="/img/logos/stylight-2208d580c8.png" src2x="/img/logos/stylight@2x-41ec506b32.png" mobile="hide"%}}
{{% /kit-logowall %}}

Card

parameters

bordercolor … the color of the border

none (default), grey

fillcolor … the background color of the card

none (default), grey, primary

hovercolor … sets the hover effect color

none (default), blue

Bordered Card With Hover


{{% kit-card bordercolor="grey" hovercolor="blue" %}}
Bordered Card With Hover
{{% /kit-card %}}


Grey Filled Card


{{% kit-card fillcolor="grey" %}}
Grey Filled Card 
{{% /kit-card %}}

Testimonial

parameters

style … sets the style of the testimonial

whiteborder (defautl), white, dark

text … text in the quotation
personimage, personimage2x … images of the person
personname … name of the person
personjob … job of the person
logo, logo2x … logo of the person’s company
swiperslide … true if the testimonial is part of a swiper

false (defautl), true

I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.


{{% kit-testimonial style="white" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.


{{% kit-testimonial style="whiteborder" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.


{{% kit-testimonial style="dark" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}

Swiper

parameters

white … sets the pagination points to white
grey … sets the pagination points to grey

Image Swiper

{{% kit-swiper grey="grey" %}}
{{% kit-image screenshot="true" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" swiperslide="true"%}}
{{% kit-image screenshot="true" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" swiperslide="true"%}}
{{% kit-image screenshot="true" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" swiperslide="true"%}}
{{% /kit-swiper %}}

Testimonial Swiper Dark

I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.
I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.
I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.
{{% kit-swiper white="white"%}}
{{% kit-testimonial swiperslide="true" style="white" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% kit-testimonial swiperslide="true" style="dark" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% kit-testimonial swiperslide="true" style="white" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% /kit-swiper %}}

Testimonial Swiper White

I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.
I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team.
{{% kit-swiper %}}
{{% kit-testimonial swiperslide="true" style="whiteborder" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% kit-testimonial swiperslide="true" style="whiteborder" text="I manage and update 16 different apps for iOS and Android. Without App Radar I would need a whole team." personimage="/img/person/testimonial-alexander-marktl-3ac5d6da9d.png" personimagex2="/img/person/testimonial-alexander-marktl@2x-8416cdbd25.png" personname="Alexander Marktl" personjob="CEO" logo="/img/logos/itranslate-0a132659f5.png" logox2="/img/logos/itranslate@2x-41292939e8.png"%}}
{{% /kit-swiper %}}

Panels

Basic Panel

parameters

style … sets the background of the panel

white (default), whitegradient, dark

align … sets the alignment of the panel content

left (default), center, right

White Panel

{{% kit-panel %}}
#### White Panel
{{% /kit-panel %}}

White Gradient Panel with centered content

{{% kit-panel style="whitegradient" align="center"%}}
#### White Gradient Panel with centered content
{{% /kit-panel %}}

Dark Panel with right-aligned content

{{% kit-panel style="dark" align="right"%}}
#### Dark Panel with right-aligned content
{{% /kit-panel %}}

Basic Panel + Grid

Cell Element parameters

align … sets the alignment of the content

left (default), center, right

columncount … sets the amount of columns there should be in the grid

1, 2, 3, 4, remain (cell will be the size of the remaining grid)

Two Contents

First Content

Second Content

{{% kit-grid %}}
{{% kit-cell columncount="2"%}}
First Content
{{% /kit-cell %}}
{{% kit-cell columncount="2"%}}
Second Content
{{% /kit-cell %}}
{{% /kit-grid %}}

Two Contents with 13 and 23 sizes

First Content

Second Content

{{% kit-grid %}}
{{% kit-cell columncount="3"%}}
First Content
{{% /kit-cell %}}
{{% kit-cell columncount="remain"%}}
Second Content
{{% /kit-cell %}}
{{% /kit-grid %}}

Three Contents

First Content

Second Content

Third Content

{{% kit-grid %}}
{{% kit-cell columncount="3"%}}
First Content
{{% /kit-cell %}}
{{% kit-cell columncount="3"%}}
Second Content
{{% /kit-cell %}}
{{% kit-cell columncount="3"%}}
Third Content
{{% /kit-cell %}}
{{% /kit-grid %}}

Four Contents

First Content

Second Content

Third Content

Fourth Content

{{% kit-grid %}}
{{% kit-cell columncount="4"%}}
First Content
{{% /kit-cell %}}
{{% kit-cell columncount="4"%}}
Second Content
{{% /kit-cell %}}
{{% kit-cell columncount="4"%}}
Third Content
{{% /kit-cell %}}
{{% kit-cell columncount="4"%}}
Fourth Content
{{% /kit-cell %}}
{{% /kit-grid %}}

Specific Layout Panels

Content Panel

parameters

style … sets the style of the panel

white (default), whitegradient, dark

header … header text
buttontext … text on the button
buttonstyle … style of the button

primary (default), accent, nofill, nofilldark

onclick … button onclick event
left … image in the left background
right … image in the right background

Headline

Content without image



{{% kit-content-panel style="dark" header="Headline" buttontext="Button" buttonstyle="accent" onclick=""%}}
Content without image
{{% /kit-content-panel %}}

Headline

Content with image on the right



{{% kit-content-panel style="whitegradient" header="Headline" buttontext="Button" buttonstyle="primary" onclick="" right="/img/screenshots/laptop_screenshot-0fe54b92f8.png"%}}
Content with image on the right
{{% /kit-content-panel %}}

Headline

Content with image on the left



{{% kit-content-panel style="dark" header="Headline" buttontext="Button" buttonstyle="accent" onclick="" left="/img/screenshots/laptop_screenshot-0fe54b92f8.png"%}}
Content with image on the left
{{% /kit-content-panel %}}

Image Content Panel

parameters

style … sets the style of the panel

white (default), whitegradient, dark

imagesize … sets the size of the image

normal (default), large

screenshot … defines whether the image is a screenshot or not

false (default), true

header … header text
src, src2x … sets the destination of the image and image2x
alt … sets the alternate text for an image

Heading

Content on the right

{{% kit-image-content-panel imagesize="large" screenshot="true" style="whitegradient" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" header="Heading"%}}
Content on the right
{{% kit-button style="primary" text="primary" %}}
{{% /kit-image-content-panel %}}

Content Image Panel

parameters

style … sets the style of the panel

white (default), whitegradient, dark

imagesize … sets the size of the image

normal (default), large

screenshot … defines whether the image is a screenshot or not

false (default), true

header … header text
src, src2x … sets the destination of the image and image2x
alt … sets the alternate text for an image

Heading

Content on the left

{{% kit-content-image-panel  screenshot="true" style="dark" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" header="Heading"%}}
Content on the left
{{% kit-button style="primary" text="primary" %}}
{{% /kit-content-image-panel %}}

Predefined Panels

Content with two Buttons and Image

{{% kit-content-image-panel style="dark" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" header="Request a Hands-on Demo."%}}
Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.
{{% kit-button style="accent" text="Get Started" %}}
{{% kit-button style="nofilldark" text="Learn More" %}}
{{% /kit-image-content-panel %}}

Request a Hands-on Demo.

Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.

Content with List, two Buttons and Image

{{% kit-image-content-panel style="whitegradient" src="/img/screenshots/optimization-score@1x-5120258e0a.png" src2x="/img/screenshots/optimization-score@2x-00d05602ea.png" header="Request a Hands-on Demo."%}}
Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.
{{% kit-list %}}
- Find the right Keywords with the App Radar AI.
- Publish your changes directly to the App Stores.
- Generate more Downloads through Search.
- Monitor your App Store Rankings in every Country.
{{% /kit-list %}}
{{% kit-button style="primary" text="Get Started" %}}
{{% kit-button style="nofill" text="Learn More" %}}
{{% /kit-image-content-panel %}}

Request a Hands-on Demo.

Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.

  • Find the right Keywords with the App Radar AI.
  • Publish your changes directly to the App Stores.
  • Generate more Downloads through Search.
  • Monitor your App Store Rankings in every Country.

Three Contents with Icon

parameters

style … sets the style of the panel

white (default), whitegradient, dark

header1 … first heading
text1 … first text
icon1 … first icon
header2 … second heading
text2 … second text
icon2 … second icon
header3 … third heading
text3 … third text
icon3 … third icon
{{% kit-trioicons style="dark" header1="Increase Visibility" text1="Make sure users find your mobile app in search results and conquer the top charts." icon1="/img/icons/landingpage/being-found-icon-71d9a4aa91.svg" header2="ASO at Lightspeed" text2="Reduce the time you need for an update from hours and days to a few minutes." icon2="/img/icons/landingpage/time-icon-ab9cf9d3b8.svg" header3="Keyword Manager" text3="Finding the right keywords and implementing an ASO strategy for app has never been easier." icon3="/img/icons/landingpage/ai-icon-bff70c47b1.svg" %}}

Increase Visibility

Make sure users find your mobile app in search results and conquer the top charts.

ASO at Lightspeed

Reduce the time you need for an update from hours and days to a few minutes.

Keyword Manager

Finding the right keywords and implementing an ASO strategy for app has never been easier.

Social Media panel

Ebook download panel

{{% kit-image-content-panel style="whitegradient" src="/img/layout/resource-ebook-book-cover@1x.png" src2x="/img/layout/resource-ebook-book-cover@2x.png"%}}
{{% kit-ebookform style="white" header="Become an ASO Guru." text="Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge  your app business." buttontext="Download Ebook Now"%}}
{{% /kit-image-content-panel %}}

Become an ASO Guru.

Find out how to be a leader in the app store battle. Schedule a demo with our App Radar experts and see how it can supercharge your app business.






Exit Screen

parameters

style … sets the style of the exit screen

white (default), dark

header … header text

default: Wait! Before you go…

subheader … subheading text

default: Get your new ASO Resource Kit -

subheader2 … second subheading text

default: The only must-have to get your ASO-engine going.

highlight … a highlighted part in the subheading

default: for FREE!

buttontext … text on the button

default: Claim your Guide

buttonstyle … style of the button

primary (default), accent, nofill, nofilldark

{{% aso-resource-kit-out style="dark" src="/img/layout/kit-resource-pack@3x-935213c47b.png"%}}