Components
CTA
The content goes in the default slot between the tags. You can set button text, title and target.
`<custom-cta @button="button name" @title="A title" @target="/thinking/">The content goes here</custom-cta>`
Have a look at some of the projects I built!
I love creating personalized web experiences that are fast, secure, accessible, environmentally friendly and privacy compliant.
button namePricing (raw)
Usable as wrapper or as single pricing box (should be wrapped in layout class). Adding class="emphasize" adds a light background color in the current theme.
`<custom-pricing @title="Coaching" @element="h2" @description="The description of this offering. Few words." @price="$1000" @conditions="per month / billed annually" @button="Get started" @link="#" > <ul> <li>This is a feature</li> <li>Something else this does</li> <li>Such a good deal</li> <li>Hello</li> </ul> </custom-pricing>`
Coaching
The description of this offering. Few words.
$1000
per month / billed annually
- This is a feature
- Something else this does
- Such a good deal
- Hello
Coaching
The description of this offering. Few words.
$1000
per month / billed annually
- This is a feature
- Something else this does
- Such a good deal
- Hello
Advisory
The description of this offering. Few words. Contrary to popular belief, Lorem Ipsum is not simply random text
$2000
per month / billed annually
There can also be normal text. Solutions that help large organizations build a strong open source culture and leverage it to recruit, retain, and foster top software engineering talent, improve team efficiency, and boost innovation.
Coaching
The description of this offering. Few words.
$1000
per month / billed annually
- This is a feature
- Something else this does
- Such a good deal
- Hello
Advisory
The description of this offering. Few words. Contrary to popular belief, Lorem Ipsum is not simply random text
$2000
per month / billed annually
There can also be normal text. Solutions that help large organizations build a strong open source culture and leverage it to recruit, retain, and foster top software engineering talent, improve team efficiency, and boost innovation.
Team Advisory
The passage, and going through the cites of the word in classical literature
$5000
per month / billed annually
- This is a feature
- Something else this does
- Such a good deal
- Atque dolorem consequatur deleniti.
Pricing
Usable as wrapper or as single pricing box (should be wrapped in layout class). Adding class="emphasize" adds a light background color in the current theme.
`<pricing-services></pricing-services>`
Coaching
The description of this offering. Few words.
$1000
per month / billed annually
- This is a feature
- Something else this does
- Such a good deal
- Hello
Advisory
The description of this offering. Few words. Contrary to popular belief, Lorem Ipsum is not simply random text
$2000
per month / billed annually
There can also be normal text. Solutions that help large organizations build a strong open source culture and leverage it to recruit, retain, and foster top software engineering talent, improve team efficiency, and boost innovation.
Team Advisory
The passage, and going through the cites of the word in classical literature
$5000
per month / billed annually
- This is a feature
- Something else this does
- Such a good deal
- Atque dolorem consequatur deleniti.
Custom
There are many variations of passages of Lorem Ipsum available.
Let's talk
- This is a feature
- Something else this does
- Such a good deal
- Hello
- Lorem ipsum
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Quote
The quoted text goes in the default slot between the tags. The source of the quote is optional and goes in the `source` prop. The `@classnames` prop is optional and can be used to add custom classes to the component, for example to change the color of the quote.
`<custom-quote class="custom" @source="Person who said this">Slot content</custom-quote>`
Testimonial
`<custom-testimonial class="custom classes" @source="Person who said this" image="./src/assets/images/pages/tobie-langel.jpg" alt="Tobie"> ... </custom-testimonial>`
Video
The subtitle serves as a figcaption and is optional.
`<custom-youtube @slug="nLfJiFpU1Io" @label="A video" @subtitle="subtitle"></custom-youtube>`