Components

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 creative-fill hover animation

<Button
  hoverEffect="creative-fill"
  class="effect-color-accent"
  label="Creative Fill"
  url="/"
/>

// This button has magnetic hover animation

<Button hoverEffect="magnetic" label="Magnetic" url="/" />

// This button has text-flip hover animation

<Button hoverEffect="text-flip" label="Text Flip" url="/" />

// This button has magnetic and text-flip together hover animation

<Button
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>
<Button
  variant="circle"
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>

This button has creative-fill hover animation

Creative Fill

This button has magnetic hover animation

Magnetic

This button has text-flip hover animation

Text Flip

This button has magnetic and text-flip together hover animation

Magnetic With Text Flip

---

Buttons Variants

Every unique button style used across the theme, with its hover animation where supported. Each button color can be customize by adding class=“btn-accent” or class=“btn-light”

<Button label="Example Button" url="/" />
<Button class="btn-accent" label="Example Button" url="/" />
<Button
  variant="outline"
  label="With External Link"
  url="https://astro.build"
/>
<Button variant="text" label="Example Button" url="/" />
<Button variant="circle" label="Example Button" url="/" />

Fill buttons — solid color, used for primary calls to action:

Outline and text variants:

Creative fill — the background circle grows from the cursor. Set the fill color with effect-color-primary, effect-color-accent, effect-color-dark, or effect-color-light:

Magnetic and text-flip animations — the button follows the cursor and the label rolls over:

Magnetic Text Flip Magnetic Text Flip

Circle button — round call to action, pairs well with magnetic effects:

Explore Services

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/projects/project-video-thumb.png"
/>

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 StackedSplit from "../widgets/StackedSplit.astro";
import overrideObjects from "@/lib/utils/overrideObjects.ts";
import { getLocaleUrlCTM } from "@/lib/utils/i18nUtils.ts";

// Type for this section data
type AboutOne = Section & {
  imagePosition: "left" | "right";
};

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,
  image,
  description,
  imagePosition,
  button,
} = actualContent as AboutOne;

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

<StackedSplit image={image} direction={imagePosition}>
  <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)}
      />
    )
  }
</StackedSplit>

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/web.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/web.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
</CardWrapper>

Image List With Video

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Team reviewing a digital product roadmap"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Engineer working on a secure application release"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Analytics dashboard displayed during a strategy review"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Modern workspace for product collaboration"
  />
</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 We 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. We are committed to helping businesses like
  Oloyon revolutionize their customer engagement and drive long-term success.
</Testimonial>