Banners Components in Artemis library

Banners from Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="px-7 py-6 bg-indigo-500 rounded">
      <div class="flex flex-wrap">
        <div class="w-full md:w-1/2 pt-6 mb-10 md:mb-0">
          <h3 class="mb-1 text-2xl font-bold text-white">
            <span class="text-green-300">Try For Free</span>
            <span>New Features</span>
          </h3>
          <p class="mb-8 md:mb-16 text-sm font-medium text-indigo-100">No charge for seven days</p>
          <a class="flex items-center text-white font-medium" href="#">
            <svg class="mr-1" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.92 6.62C11.8724 6.49725 11.801 6.38511 11.71 6.29L6.71 1.29C6.61676 1.19676 6.50607 1.1228 6.38425 1.07234C6.26243 1.02188 6.13186 0.995911 6 0.995911C5.7337 0.995911 5.4783 1.1017 5.29 1.29C5.19676 1.38324 5.1228 1.49393 5.07234 1.61575C5.02188 1.73758 4.99591 1.86814 4.99591 2C4.99591 2.2663 5.1017 2.5217 5.29 2.71L8.59 6H1C0.734784 6 0.48043 6.10536 0.292893 6.2929C0.105357 6.48043 0 6.73479 0 7C0 7.26522 0.105357 7.51957 0.292893 7.70711C0.48043 7.89465 0.734784 8 1 8H8.59L5.29 11.29C5.19627 11.383 5.12188 11.4936 5.07111 11.6154C5.02034 11.7373 4.9942 11.868 4.9942 12C4.9942 12.132 5.02034 12.2627 5.07111 12.3846C5.12188 12.5064 5.19627 12.617 5.29 12.71C5.38296 12.8037 5.49356 12.8781 5.61542 12.9289C5.73728 12.9797 5.86799 13.0058 6 13.0058C6.13201 13.0058 6.26272 12.9797 6.38458 12.9289C6.50644 12.8781 6.61704 12.8037 6.71 12.71L11.71 7.71C11.801 7.6149 11.8724 7.50275 11.92 7.38C12.02 7.13654 12.02 6.86346 11.92 6.62Z" fill="#D7D5F8"></path>
            </svg>
            <span>Check demo</span>
          </a>
        </div>
        <div class="w-full md:w-1/2 flex items-center">
          <img class="mx-auto h-48" src="artemis-assets/images/chart-folder.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Banners from Artemis Dashboard

Bootstrap

Artemis Dashboard

<section class="py-8">
  <div class="container">
    <div class="p-8 bg-primary rounded">
      <div class="row align-items-center">
        <div class="col-12 col-md-6 mb-10 mb-md-0">
          <h3 class="h4 fw-bold"><span class="text-success" >Try For Free</span> <span class="text-white" >New Features</span></h3>
          <p class="mb-10 small text-white">No charge for seven days</p><a class="btn btn-lg p-0 text-white d-flex align-items-center" href="#">
            <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.92 6.62C11.8724 6.49725 11.801 6.38511 11.71 6.29L6.71 1.29C6.61676 1.19676 6.50607 1.1228 6.38425 1.07234C6.26243 1.02188 6.13186 0.995911 6 0.995911C5.7337 0.995911 5.4783 1.1017 5.29 1.29C5.19676 1.38324 5.1228 1.49393 5.07234 1.61575C5.02188 1.73758 4.99591 1.86814 4.99591 2C4.99591 2.2663 5.1017 2.5217 5.29 2.71L8.59 6H1C0.734784 6 0.48043 6.10536 0.292893 6.2929C0.105357 6.48043 0 6.73479 0 7C0 7.26522 0.105357 7.51957 0.292893 7.70711C0.48043 7.89465 0.734784 8 1 8H8.59L5.29 11.29C5.19627 11.383 5.12188 11.4936 5.07111 11.6154C5.02034 11.7373 4.9942 11.868 4.9942 12C4.9942 12.132 5.02034 12.2627 5.07111 12.3846C5.12188 12.5064 5.19627 12.617 5.29 12.71C5.38296 12.8037 5.49356 12.8781 5.61542 12.9289C5.73728 12.9797 5.86799 13.0058 6 13.0058C6.13201 13.0058 6.26272 12.9797 6.38458 12.9289C6.50644 12.8781 6.61704 12.8037 6.71 12.71L11.71 7.71C11.801 7.6149 11.8724 7.50275 11.92 7.38C12.02 7.13654 12.02 6.86346 11.92 6.62Z" fill="#D7D5F8"></path>
            </svg> <span class="ms-2" >Check demo</span></a>
        </div>
        <div class="col-12 col-md-6 col-lg-auto ms-auto"><img class="d-none d-md-block mx-auto img-fluid" style="height: 12rem;" src="artemis-assets/images/chart-folder.png" alt="alt" /><img class="d-md-none mx-auto img-fluid" src="artemis-assets/images/chart-folder.png" alt="alt" /></div>
      </div>
    </div>
  </div>
</section>

Banners from Artemis Dashboard

Bulma

Artemis Dashboard

<section class="section py-6">
  <div class="container">
    <div class="py-6 px-5 has-background-primary" style="border-radius: 4px;">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-6 mb-6 mb-0-tablet">
          <h3 class="is-size-3 has-text-weight-bold">
            <span class="has-text-success">Try For Free</span>
            <span class="has-text-white">New Features</span>
          </h3>
          <p class="has-text-white is-size-6 mb-6">No charge for seven days</p>
          <a class="button is-ghost has-text-white is-inline-flex is-align-items-center is-size-5" href="#">
            <svg width="12" height="14" viewbox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.92 6.62C11.8724 6.49725 11.801 6.38511 11.71 6.29L6.71 1.29C6.61676 1.19676 6.50607 1.1228 6.38425 1.07234C6.26243 1.02188 6.13186 0.995911 6 0.995911C5.7337 0.995911 5.4783 1.1017 5.29 1.29C5.19676 1.38324 5.1228 1.49393 5.07234 1.61575C5.02188 1.73758 4.99591 1.86814 4.99591 2C4.99591 2.2663 5.1017 2.5217 5.29 2.71L8.59 6H1C0.734784 6 0.48043 6.10536 0.292893 6.2929C0.105357 6.48043 0 6.73479 0 7C0 7.26522 0.105357 7.51957 0.292893 7.70711C0.48043 7.89465 0.734784 8 1 8H8.59L5.29 11.29C5.19627 11.383 5.12188 11.4936 5.07111 11.6154C5.02034 11.7373 4.9942 11.868 4.9942 12C4.9942 12.132 5.02034 12.2627 5.07111 12.3846C5.12188 12.5064 5.19627 12.617 5.29 12.71C5.38296 12.8037 5.49356 12.8781 5.61542 12.9289C5.73728 12.9797 5.86799 13.0058 6 13.0058C6.13201 13.0058 6.26272 12.9797 6.38458 12.9289C6.50644 12.8781 6.61704 12.8037 6.71 12.71L11.71 7.71C11.801 7.6149 11.8724 7.50275 11.92 7.38C12.02 7.13654 12.02 6.86346 11.92 6.62Z" fill="#D7D5F8"></path>
            </svg>
            <span class="ml-2">Check demo</span>
          </a>
        </div>
        <div class="column is-6">
          <img class="is-hidden-touch image mx-auto" style="height: 15rem;" src="artemis-assets/images/chart-folder.png" alt="alt">
          <img class="is-hidden-desktop image" src="artemis-assets/images/chart-folder.png" alt="alt">
        </div>
      </div>
    </div>
  </div>
</section>

Banners from Artemis Dashboard

Material-UI

Artemis Dashboard

import React from "react";
import { Grid, Box, Typography, Container, Link }  from '@mui/material';
import theme from '../../theme/theme';

const Banner = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            backgroundColor: theme.palette.primary[500],
            borderRadius: theme.spacing(0.5),
            overflow: 'hidden'
        },
        header: {
            padding: theme.spacing(4)
        },
        title: {
            color: theme.palette.common.white
        },
        subtitle: {
            color: theme.palette.primary[100],
            fontWeight: theme.typography.fontWeightMedium,
            mb: theme.spacing(8)
        },
        text: {
            color: theme.palette.success[300],
            mr: theme.spacing(1)
        },
        link: {
            color: theme.palette.common.white,
            ml: theme.spacing(1.3)
        },
        img: {
            maxWidth: theme.spacing(34),
            display: 'block',
            m: '0 auto',
            [theme.breakpoints.up('sm')]: {
                mr: 0
            }
        }
    }

    const content = {
        'Typography1-1': '30 Days',
        'Typography1-2': 'Free Trial',
        'Typography1-3': 'Pay 0$ for the First Month',
        'Image1-1': <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.92 6.62C11.8724 6.49725 11.801 6.38511 11.71 6.29L6.71 1.29C6.61676 1.19676 6.50607 1.1228 6.38425 1.07234C6.26243 1.02188 6.13186 0.995911 6 0.995911C5.7337 0.995911 5.4783 1.1017 5.29 1.29C5.19676 1.38324 5.1228 1.49393 5.07234 1.61575C5.02188 1.73758 4.99591 1.86814 4.99591 2C4.99591 2.2663 5.1017 2.5217 5.29 2.71L8.59 6H1C0.734784 6 0.48043 6.10536 0.292893 6.2929C0.105357 6.48043 0 6.73479 0 7C0 7.26522 0.105357 7.51957 0.292893 7.70711C0.48043 7.89465 0.734784 8 1 8H8.59L5.29 11.29C5.19627 11.383 5.12188 11.4936 5.07111 11.6154C5.02034 11.7373 4.9942 11.868 4.9942 12C4.9942 12.132 5.02034 12.2627 5.07111 12.3846C5.12188 12.5064 5.19627 12.617 5.29 12.71C5.38296 12.8037 5.49356 12.8781 5.61542 12.9289C5.73728 12.9797 5.86799 13.0058 6 13.0058C6.13201 13.0058 6.26272 12.9797 6.38458 12.9289C6.50644 12.8781 6.61704 12.8037 6.71 12.71L11.71 7.71C11.801 7.6149 11.8724 7.50275 11.92 7.38C12.02 7.13654 12.02 6.86346 11.92 6.62Z" fill="#D7D5F8"/></svg>,
        'Link1-1': 'Check our offer',
        'Image1-2': 'mui-artemis-assets/banner.png',
        ...props.content
    }
    
    return (
        <Box component="section" sx={styles.section}>
            <Container>
                <Grid container>
                    <Grid item xs>
                        <Box sx={styles.wrapper}>
                            <Grid container alignItems="center">
                                <Grid item xs={12} sm={6}>
                                    <Box component="header" sx={styles.header}>
                                        <Typography variant="h3" sx={styles.title}>
                                            <Typography variant="h3" component="span" sx={styles.text}>{content['Typography1-1']}</Typography>
                                            <Typography variant="h3" component="span">{content['Typography1-2']}</Typography>
                                        </Typography>
                                        <Typography variant="body2" sx={styles.subtitle}>{content['Typography1-3']}</Typography> 
                                        <Grid container alignItems="center">
                                            <Grid item>
                                                {content['Image1-1']}
                                            </Grid>
                                            <Grid item>
                                                <Link href="#" variant="body1" sx={styles.link}>{content['Link1-1']}</Link>
                                            </Grid>
                                        </Grid>
                                    </Box>
                                </Grid>
                                <Grid item xs={12} sm={6}>
                                    <Box component="img" sx={styles.img} src={content['Image1-2']}></Box>
                                </Grid>
                            </Grid>
                        </Box>
                    </Grid>
                </Grid>
            </Container>
        </Box>
    )
}

export default Banner;

Banners Components by Shuffle

Choose from 20 variations of Banners UI components. Presented here are variants available in Artemis library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Banners UI components, code and our visual editor. Try the demo for free!

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Banners Components in Artemis library

Framework

UI Library

Components

Banners from Artemis Dashboard

Your next website starts here

Banners from Artemis Dashboard

Banners from Artemis Dashboard

Banners from Artemis Dashboard

Banners Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Banners Components in Artemis library

Framework

UI Library

Components

Banners from Artemis Dashboard

Your next website starts here

Banners from Artemis Dashboard

Banners from Artemis Dashboard

Banners from Artemis Dashboard

Banners Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company