Elements

Text Formatting

---

Bold Text

To make text bold, use ** or __ around the word or phrase:
Example: This text is bold or This text is bold

Italic Text

To italicize text, use * or _ around the word or phrase:
Example: This text is italic or This text is italic

Underline Text

To underline text, use HTML <u> tags:

Example:

<u>This text is underlined</u>

Result:

This text is underlined

Strikethrough

To strike through text, use ~~ around the word or phrase:
Example: This text is struck through

Button

---

This button has bg-flip hover animation

<Button
  hoverEffect="bg-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Background Flip Primary"
  url="/"
/>
<Button
  hoverEffect="bg-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-dark w-fit"
  label="Background Flip Dark"
  url="/"
/>
<Button
  hoverEffect="bg-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline w-fit"
  label="Background Flip Outline"
  url="/"
/>

Background Flip PrimaryBackground Flip Primary Background Flip DarkBackground Flip Dark Background Flip OutlineBackground Flip Outline

This button has icon-flip hover animation

<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Icon Flip Primary"
  url="/"
/>
<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline w-fit"
  label="Icon Flip Outline"
  url="/"
/>
<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary btn-sm w-fit"
  label="Icon Flip Primary - sm"
  url="/"
/>
<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline btn-sm w-fit"
  label="Outline Icon Flip - sm"
  url="/"
/>

Icon Flip Primary Icon Flip Outline Icon Flip Primary - sm Outline Icon Flip - sm

This button has creative-fill hover animation

<Button
  hoverEffect="creative-fill"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Creative Fill Primary"
  url="/"
/>
<Button
  hoverEffect="creative-fill"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-dark w-fit"
  label="Creative Fill Dark"
  url="/"
/>

Creative Fill Primary Creative Fill Dark

This button has creative-fill circle hover animation

<Button
  hoverEffect="creative-fill"
  variant="circle"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Creative Fill Circle"
  url="/"
/>
<Button
  hoverEffect="creative-fill"
  variant="circle"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-dark w-fit"
  label="Creative Fill Circle"
  url="/"
/>
<Button
  hoverEffect="creative-fill"
  variant="circle"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline w-fit"
  label="Creative Fill Circle"
  url="/"
/>

Creative Fill Circle Creative Fill Circle Creative Fill Circle

Text Buttons Variants

<Button
  variant="text"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="w-fit"
  label="Text Button"
  url="/"
/>
<span class="bg-dark py-4">
  <Button
    variant="text"
    icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
    class="btn-text-light w-fit"
    label="Text Button"
    url="/"
  />
</span>

Text Button Text Button

Accordion

---

<Accordion label="Example Accordion Label 01" group="accordion-01" expanded="true">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

- **Essentials**: Focused workshop to identify core values and USP.
- **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
- **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

<Accordion label="Example Accordion Label 02" group="accordion-01" expanded="false">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

- **Essentials**: Focused workshop to identify core values and USP.
- **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
- **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

---

<Accordion label="Example Accordion Label 03" group="accordion-01" expanded="false">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

- **Essentials**: Focused workshop to identify core values and USP.
- **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
- **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

---

Tab

---

<Tabs>
  <Tab name="Overview">
    **How Can We Assist You?** We offer personalized consultations to help you
    achieve your personal and professional goals. Choose a tab below to explore
    our services. - Personal Coaching - Career Counseling - Conflict Resolution
    - Life Advice
  </Tab>

  <Tab name="Coaching">
    **Personal Coaching: Unlock Your Potential** Get personalized coaching to
    overcome challenges and set meaningful goals. We focus on: - Confidence
    Building - Emotional Intelligence - Overcoming Procrastination
  </Tab>
</Tabs>

Youtube Video

---

<VideoInline src="rFVpSwgCkCo" provider="youtube" />

Custom Video

---

<VideoInline
  src="/videos/test-video.mp4"
  provider="html5"
  poster="/images/video-thumbnail.jpg"
/>

Notice

---

<Notice type="info" title="Information">
  This is an informational message.
</Notice>

<Notice type="warning">This is a warning message without a title.</Notice>

<Notice type="success" title="Success!">
  Your changes have been saved successfully.
</Notice>

<Notice type="error" title="Error!">
  Something went wrong. Please try again.
</Notice>

Blockquote

---

To create a blockquote, start the line with a >:
Example:

This is a blockquote.
It spans multiple lines.

Author

Code

---

To format inline code, use backticks (`):
Example: This is inline code

For multi-line code blocks, use triple backticks (```):
Example:

---
import type { Section } from "@/types";
import Button from "../Button.astro";
import { markdownify } from "@/lib/utils/textConverter";
import { getEntryCTM } from "@/lib/contentParser.astro";
import overrideObjects from "@/lib/utils/overrideObjects.ts";
import { getLocaleUrlCTM } from "@/lib/utils/i18nUtils.ts";

// Type for this section data
type AboutOne = Section;

type Props = {
  content?: AboutOne;
};

// Fetching the default content for the this section
let defaultContent = (
  await getEntryCTM("sections", "about-one", Astro.currentLocale)
)?.data as AboutOne;

// Merges custom content overrides (e.g., just a title) with defaultContent fallbacks. Enables easy section reuse across pages with partial data changes.
let actualContent = overrideObjects(
  { ...defaultContent },
  Astro.props.content,
) as AboutOne;

// Extracting required values from 'content' object
let { enable = true, title, description, button } = actualContent as AboutOne;

if (!enable) {
  return null;
}
---

<section>
  <div class="space-y-8">
    {
      title && (
        <h2 class="text-h1-sm md:text-h1" set:html={markdownify(title)} />
      )
    }
    {description && <p set:html={markdownify(description)} />}
  </div>
  {
    button?.enable && (
      <Button
        variant="text"
        label={button.label}
        class="text-base-sm uppercase md:text-base"
        url={getLocaleUrlCTM(button.url, Astro.currentLocale)}
      />
    )
  }
</section>

Horizontal Rule

---

To create a horizontal rule, use three or more dashes (---), asterisks (***), or underscores (___) on a new line:
Example:

---

Headings

---

Create headings by adding # symbols before your text. Add custom class by bracket [.class-name].
Example:

# Heading 1 [.custom-class .mt-0! .another-class]
## Heading 2 [.custom-class .mt-0! .another-class4]
### Heading 3 [.custom-class .mt-0! .another-class]
#### Heading 4 [.custom-class .mt-0! .another-class]
##### Heading 5 [.custom-class .mt-0! .another-class]
###### Heading 6 [.custom-class .mt-0! .another-class]

Table

---

Create tables using pipes (|) and dashes (-):

Example:

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Images

---

Local Image

Components

Styled List

---

<ListCheck>

- **Inconsistent Customer Interactions**: Customers experienced varying levels of service quality across different channels.
- **Lack of Personalization**: Limited data integration led to generic, one-size-fits-all communication.
- **Customer Retention**: Difficulty in retaining customers due to inadequate follow-up and engagement.

</ListCheck>

Information Block Card

---

<CardWrapper>
  <Card
    title="Custom Solution"
    description="We care success relationships fuel success we love building"
    icon="/images/icons/services/product.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
  <Card
    title="In-time Result"
    description="We care success relationships fuel success we love building"
    icon="/images/icons/services/product.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
</CardWrapper>

Image List With Video

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Team members collaborating in a bright office"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Team members collaborating in a bright office"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Team members collaborating in a bright office"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Team members collaborating in a bright office"
  />
</ImageList>

Testimonial

---

The following code generates the testimonial shown below.

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="CEO, Founder"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Our partnership with Veltro demonstrates the power of a well-executed customer
  engagement strategy. By integrating advanced technologies and data-driven
  insights, we helped them achieve a more personalized, consistent, and
  rewarding customer experience. At Veltro, we are committed to helping
  businesses like Oloyon revolutionize their customer engagement and drive
  long-term success.
</Testimonial>