Components

 

Components

1. Gallery view

đź’ˇ
Use multiple view names to achieve different styles for a gallery view.
** !NOTE: change the view names may break the styles **
 
 

1. Default small gallery

 
 

2. Default medium gallery

 
 

3. Default large gallery

 
 
To make the last card centre aligned use .card-centre
.card-centre
 
 

4. Title gallery view

The design below is achieved by using the view names - .heading-left.heading-gray.mobile-carousel.sm-title
To generate a gallery view with first page as title check the Title page property and place it as first block of the gallery view
  1. .heading-left ⇒ First item is styled as title page
  1. .heading-gray ⇒ property description is styled as heading with gray color
  1. .mobile-carousel ⇒ Change gallery view to carousel in mobile view
 
 
 

5. CTA Black Button

The design below is achieved by using the view names - .cta-black.lg-title
  1. cta-black ⇒ change the color of the CTA Button to black.
  1. lg-title ⇒ change the size of card title to 24px
 
 

6. CTA Purple and Without border

The below design is achived using .cta-purple.border-hidden.mobile-carousel
  • .border-hidden ⇒ Hide border for cards
  • .cta-purple ⇒ Change the CTA Button background color to purple
  • .heading-left ⇒ First gallery view item styled as title card
  • .sm-icon ⇒ Reduce the size of the card icon
 
 

7. Blue Background Gallery view

The below design is achived using .cta-purple.border-hidden.mobile-carousel
  1. .blue-bg ⇒ changes gallery view card to blue color
  1. .card-center ⇒ center the last one card to center aligned
  1. .sm-title ⇒ change the size of the card title to 16px
 
 

8. Black background

The design below is achieved by using the view names - .blue-bg.card-centre.mobile-carousel.sm-title
  1. .black-bg ⇒ Change the background color of the gallery view cards to black
  1. .text-white ⇒ Change the text color of the cards to white
  1. .five-column ⇒ Changes no of items to displayed on a single row to five
  1. .md-title ⇒ Change the size of the gallery view card title to 18px.
 
 
 
 
The design below is achieved by using the view name - .black-bg
 
 

9. Transparent background and five column

To achieve the below styles use view name .five-column.transparent-bg.content-centre.white-text.sm-title
  1. .five-column ⇒ Five cards will appear on each row
  1. .transparent-bg ⇒ remove the background of the card (to match with brown callout’s color)
  1. .content-centre ⇒ center align the contents of the site (NOTE:.card-centre center align the last card)
 
 
 

10. Centered card view

.topics-center is a special gallery view where cards appear center aligned
 
 

Carousel components

11. Small carousel

  1. .sm-carousel ⇒ change gallery view to small carousel
  1. .md-title ⇒ change the size of the card title to 18px
The design below is achieved by using the view names - .sm-carousel.md-title
.sm-carousel.md-title
 
 

12. Medium carousel

The design below is achieved by using the view names - .md-carousel.heading-left.cta-purple.lg-title
  1. .md-carousel ⇒ changes gallery view to medium carousel
  1. .cta-purple ⇒ change background color of property CTA Button to purple
 
 

13. Large carousel

The design below is achieved by using the view name - .lg-carousel
  1. lg-carousel ⇒ change the gallery view to large carousel
 
 
 

14. Mobile Carousel

The design below is achieved by using the view names - .card-centre.mobile-carousel.sm-title
  1. .card-centre ⇒ centre the last card to centre aligned
  1. .sm-title ⇒ change size of card title to 16px
  1. .mobile-carousel ⇒ change gallery view to carousel in mobile
 
 
 

15. Gallery view search

The design below is achieved by using the view name - .search
Add the search input field to the gallery view
 
 

16. Gallery view inside brown callout

 
 

17. Styled using collection name

đź’ˇ
NOTE: Blog database and pricing table are styled using database names (eg. blog db), When you create views for these two tables in any page all styles will be applied automatically. And also you can hide the database name so that it wont appear in the website
** !NOTE: change the view names may break the styles **
  1. blog-db ⇒ blog collection
  1. pricing-table ⇒ pricing collection
 
 
 

2. List view

** NOTE: All list view items appear as tab component **
 
 

3. Callout Components

đź’ˇ
First text block of the callout is used to achieve different styles.
callout-full-width
This callout streches to the full width of the screen
 

1. Centre aligned callout

đź’ˇ
If you want full width callout give a class name on the top “callout-full-width” as shown in below example
If you want all the components inside column layouts give a class name on the top “column-centre” as shown in below example
column-centre

The ASCEND Process in 3 Steps

 
 
notion image
Initial Diagnosis
Conduct a full evaluation based on the framework’s seven dimensions.
notion image
Personalized Report
Receive a detailed roadmap with actionable recommendations to advance your AI strategy.
notion image
Implementation and Support
Work with the MAGIC team to execute changes and empower your team throughout the process.
 
 
 
 

2. Full width callout

 
callout-full-width

Own your intelligence with a private-label ChatGPT

A private, multi-model, multimodality, modular, AI operating (ECO) System
 
 
 
 

3. Social container

This callout is used to achieve social banner in home page and contact us page
social-container
notion image
notion image
 
 

4. Images

 
:class=”left-align” align image to left.
notion image
class=”desktop-image" ⇒ Hide the image when width of screen is smaller than 768px
notion image
class=”mobile-image" ⇒ Hide the image when width of screen is larger than 768px
notion image
 
 

5. Other Components

 

Heading 1

Heading with gray text

Heading 2

Heading 3

 
Bold Text
Normal text

Toggle block

What kind of businesses can benefit from MAGIC Research solutions?
We work with businesses of all sizes—from startups to large enterprises—across various industries.
How quickly can we see results from an AI implementation?
 
Is my data secure?
 
Can I integrate MAGIC Research solutions with my existing systems
Â