react-icons/io#IoIosArrowRoundForward JavaScript Examples
The following examples show how to use
react-icons/io#IoIosArrowRoundForward.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From layer5-ng with Apache License 2.0 | 5 votes |
|
Testimonial = () => {
const ArrowLeft = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-prev-icon">
<IoIosArrowRoundBack />
</button>
);
const ArrowRight = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-next-icon">
<IoIosArrowRoundForward />
</button>
);
const settings = {
customPaging: function(i) {
return (
<a>
<img src={data.thumbs[i]} alt="img" />
</a>
);
},
dots: true,
dotsClass: "slick-dots testimonial__thumb",
autoplay: true,
infinite: true,
speed: 1500,
slidesShow: 1,
slidesToScroll: 1,
prevArrow: <ArrowLeft />,
nextArrow: <ArrowRight />
};
return (
<TestimonialWrapper id="testimonial">
<Container>
<Row>
<Col xs={12}>
<SectionTitle leftAlign={true} className="testmonial__heading">
<h4>Testimonial</h4>
<h2>
<span>What our client says </span> about us
</h2>
</SectionTitle>
<SlickSlider {...settings} className="testimonial__slider">
{data.testimonials.map((testimonial, index) => (
<SliderItem key={index}>
<p>
<FaQuoteLeft />
{testimonial.quote}
</p>
<div className="slider__meta">
<img src={testimonial.thumb} alt="img" />
<div className="testimonial-client">
<h6>{testimonial.author}</h6>
<p>{testimonial.dsignation}</p>
</div>
</div>
</SliderItem>
))}
</SlickSlider>
</Col>
</Row>
</Container>
</TestimonialWrapper>
);
}
Example #2
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
AppScreensClassic = () => {
const ArrowLeft = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-prev-icon">
<IoIosArrowRoundBack />
</button>
);
const ArrowRight = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-next-icon">
<IoIosArrowRoundForward />
</button>
);
const settings = {
dots: false,
autoplay: true,
infinite: true,
className: "center",
centerMode: true,
centerPadding: "170px",
slidesToShow: 3,
slidesToScroll: 1,
speed: 300,
responsive: [
{
breakpoint: 1025,
settings: {
centerPadding: "50px"
}
},
{
breakpoint: 912,
settings: {
slidesToShow: 3,
centerPadding: "80px"
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 3,
centerPadding: "60px"
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
centerPadding: "40px"
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
centerPadding: "00px"
}
}
],
prevArrow: <ArrowLeft />,
nextArrow: <ArrowRight />
};
return (
<AppScreenSctionWrapper>
<Container>
<Row>
<Col xs={12} sm={6}>
<SectionTitle
className="section-title-block"
leftAlign={true}
UniWidth="100%"
mb={50}
>
<h4>app screens</h4>
<h2>
<span>See screenshot </span> & engage in this app.
</h2>
</SectionTitle>
</Col>
<Col xs={12} sm={6}>
<div className="view-more-button">
<Button>View on Goole Play</Button>
</div>
</Col>
</Row>
<Row>
<Col xs={12}>
<SlickSlider {...settings}>
<SliderItem key={"1"}>
<img src={screen1} alt="img" />
</SliderItem>
<SliderItem key={"2"}>
<img src={screen2} alt="img" />
</SliderItem>
<SliderItem key={"3"}>
<img src={screen3} alt="img" />
</SliderItem>
<SliderItem key={"4"}>
<img src={screen4} alt="img" />
</SliderItem>
<SliderItem key={"2"}>
<img src={screen5} alt="img" />
</SliderItem>
</SlickSlider>
</Col>
</Row>
</Container>
</AppScreenSctionWrapper>
);
}
Example #3
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
BlogPage = () => {
return (
<BlogPageWrapper>
<PageHeader title="Blog Grid" author={{ name: "Alexa", profile: "#" }} />
<div className="blog-page-wrapper">
<Container>
<Row>
<Col xs={12} lg={8}>
<div className="blog-grid-wrapper">
<Row>
<Col xs={12} sm={6}>
<div className="post-block">
<div className="post-thumb-block">
<Link className="anchor" to="#">
<img src={blogThumb1} alt="img" />
</Link>
</div>
<div className="post-content-block">
<div className="post-meta-block">
<span>In: </span>
<Link className="anchor" to="#">
Discussion
</Link>
<span className="divider">/</span>
<span>15 Sep 2020</span>
</div>
<h2 className="post-title">
<Link className="anchor" to="#">
Now led tedious shy.
</Link>
</h2>
<p className="post-entry">
Answer misery adieus add wooded how nay men before
though. Pretended belonging contented mrs suffering.
</p>
<Link className="readmore-btn" to="#">
see more <IoIosArrowRoundForward />
</Link>
</div>
</div>
</Col>
<Col xs={12} sm={6}>
<div className="post-block">
<div className="post-thumb-block">
<Link className="anchor" to="#">
<img src={blogThumb2} alt="img" />
</Link>
</div>
<div className="post-content-block">
<div className="post-meta-block">
<span>In: </span>
<Link className="anchor" to="#">
Discussion
</Link>
<span className="divider">/</span>
<span>15 Sep, 2020</span>
</div>
<h2 className="post-title">
<Link className="anchor" to="#">
Now led tedious shy.
</Link>
</h2>
<p className="post-entry">
Answer misery adieus add wooded how nay men before
though. Pretended belonging contented mrs suffering.
</p>
<Link className="readmore-btn" to="#">
see more <IoIosArrowRoundForward />
</Link>
</div>
</div>
</Col>
<Col xs={12} sm={6}>
<div className="post-block">
<div className="post-thumb-block">
<Link className="anchor" to="#">
<img src={blogThumb3} alt="img" />
</Link>
</div>
<div className="post-content-block">
<div className="post-meta-block">
<span>In: </span>
<Link className="anchor" to="#">
Discussion
</Link>
<span className="divider">/</span>
<span>15 Sep, 2020</span>
</div>
<h2 className="post-title">
<Link className="anchor" to="#">
Now led tedious shy.
</Link>
</h2>
<p className="post-entry">
Answer misery adieus add wooded how nay men before
though. Pretended belonging contented mrs suffering.
</p>
<Link className="readmore-btn" to="#">
see more <IoIosArrowRoundForward />
</Link>
</div>
</div>
</Col>
<Col xs={12} sm={6}>
<div className="post-block">
<div className="post-thumb-block">
<Link className="anchor" to="#">
<img src={blogThumb4} alt="img" />
</Link>
</div>
<div className="post-content-block">
<div className="post-meta-block">
<span>In: </span>
<Link className="anchor" to="#">
Discussion
</Link>
<span className="divider">/</span>
<span>15 Sep, 2020</span>
</div>
<h2 className="post-title">
<Link className="anchor" to="#">
Now led tedious shy.
</Link>
</h2>
<p className="post-entry">
Answer misery adieus add wooded how nay men before
though. Pretended belonging contented mrs suffering.
</p>
<Link className="readmore-btn" to="#">
see more <IoIosArrowRoundForward />
</Link>
</div>
</div>
</Col>
<Col xs={12} sm={6}>
<div className="post-block">
<div className="post-thumb-block">
<Link className="anchor" to="#">
<img src={blogThumb5} alt="img" />
</Link>
</div>
<div className="post-content-block">
<div className="post-meta-block">
<span>In: </span>
<Link className="anchor" to="#">
Discussion
</Link>
<span className="divider">/</span>
<span>15 Sep, 2020</span>
</div>
<h2 className="post-title">
<Link className="anchor" to="#">
Now led tedious shy.
</Link>
</h2>
<p className="post-entry">
Answer misery adieus add wooded how nay men before
though. Pretended belonging contented mrs suffering.
</p>
<Link className="readmore-btn" to="#">
see more <IoIosArrowRoundForward />
</Link>
</div>
</div>
</Col>
<Col xs={12} sm={6}>
<div className="post-block">
<div className="post-thumb-block">
<Link className="anchor" to="#">
<img src={blogThumb6} alt="img" />
</Link>
</div>
<div className="post-content-block">
<div className="post-meta-block">
<span>In: </span>
<Link className="anchor" to="#">
Discussion
</Link>
<span className="divider">/</span>
<span>15 Sep, 2020</span>
</div>
<h2 className="post-title">
<Link className="anchor" to="#">
Now led tedious shy.
</Link>
</h2>
<p className="post-entry">
Answer misery adieus add wooded how nay men before
though. Pretended belonging contented mrs suffering.
</p>
<Link className="readmore-btn" to="#">
see more <IoIosArrowRoundForward />
</Link>
</div>
</div>
</Col>
</Row>
</div>
</Col>
<Col xs={12} lg={4}>
<Sidebar />
</Col>
</Row>
</Container>
</div>
</BlogPageWrapper>
);
}
Example #4
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
BlogList = () => {
return (
<BlogPageWrapper>
<PageHeader title="Blog List" />
<div className="blog-list-wrapper">
<Container>
<Row>
<Col sm={12} md={8}>
<Row>
<Col xs={12}>
<div className="post-block list">
<div className="post-thumb-block">
<img src={blogThumb2} alt="prime blog page" />
<div className="post-meta">
<span>
<em> 15 </em> SEP
</span>
</div>
</div>
<h2 className="post-title">
<Link to="#">
It is a long established fact that
</Link>
</h2>
<p className="post-entry">
Readable content of a page when looking at its layout. The
point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page
editors now use
</p>
<Link to="#" className="readmore-btn">
see more <IoIosArrowRoundForward />
</Link>
</div>
</Col>
<Col xs={12}>
<div className="post-block list text-only">
<h2 className="post-title">
<Link to="#">
Friendship contrasted solicitude insipidity in
introduced literature it.
</Link>
</h2>
<p className="post-entry">
Readable content of a page when looking at its layout. The
point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page
editors now use
</p>
<Link to="#" className="readmore-btn">
see more <IoIosArrowRoundForward />
</Link>
</div>
</Col>
<Col xs={12}>
<div className="post-block list qutoe-post">
<h2 className="post-title">
<Link to="#">
Friendship contrasted solicitude insipidity in
introduced literature it. He seemed denote except as
oppose do spring my.
</Link>
</h2>
</div>
</Col>
<Col xs={12}>
<div className="post-block list">
<div className="post-thumb-block">
<img src={blogThumb2} alt="prime blog page" />
<div className="post-meta">
<span>
<em> 15 </em> SEP
</span>
</div>
</div>
<h2 className="post-title">
<Link to="#">
It is a long established fact that
</Link>
</h2>
<p className="post-entry">
Readable content of a page when looking at its layout. The
point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page
editors now use
</p>
<Link to="#" className="readmore-btn">
see more <IoIosArrowRoundForward />
</Link>
</div>
</Col>
</Row>
</Col>
<Col sm={12} md={4}>
<Sidebar />
</Col>
</Row>
</Container>
</div>
</BlogPageWrapper>
);
}
Example #5
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
BlogSingle = () => {
return (
<BlogPageWrapper>
<PageHeader
title="Rhetoric me avoid may lowest even quite first."
categories={["App,", "Landing"]}
author={{ name: "Alexa", profile: "#" }}
/>
<div className="single-post-wrapper">
<Container>
<Row>
<Col xs={12} lg={8}>
<Row>
<Col xs={12}>
<div className="single-post-block">
<div className="post-thumb-block">
<img src={BlogThumb} alt="prime blog page" />
<div className="post-meta">
<span>
<em> 15 </em> SEP
</span>
</div>
</div>
<div className="post-content-block">
<p className="entry-one">
Coracoes costumes grandeza com observou horrivel mas.
Amor tive fara de dado esse em. Ve es couberam oh
garrafal mulheres. Dourados duzentos voz lustroso diz
discutir ahi. Luzindo no do tremula na so fallava.
Evitava tropheu curiosa.
</p>
<p className="entry-two">
Coracoes costumes grandeza com observou horrivel mas.
Amor tive fara de dado esse em. Ve es couberam oh
garrafal mulheres. Dourados duzentos voz lustroso diz
discutir ahi. Luzindo no do tremula na so fallava.
Evitava tropheu curiosa ou agitado os acceite si
assiste. Voz veio veja tez digo cres.
</p>
<blockquote>
You never change things by fighting the existing
reality.To change something, build a new model.
</blockquote>
<p className="entry-three">
Ao corrida ar queriam reparae do imposta acoitar do.
Qualidades intimativa aferventar ira acompanhar mau
capitulada enfraquece. Em apavorar ficarmos cantante se
ia blasonou eu comprido.
</p>
<p className="entry-four">
Coracoes costumes grandeza com observou horrivel mas.
Amor tive fara de dado esse em. Ve es couberam oh
garrafal mulheres. Dourados duzentos voz lustroso diz
discutir ahi. Luzindo no do tremula na so fallava.
Evitava tropheu curiosa ou agitado os acceite si
assiste. Voz veio veja tez digo cres.
</p>
</div>
<div className="post-info-block">
<div className="tags">
<span>Tags:</span>
<Link to="#">App</Link>
<Link to="#">Landing</Link>
<Link to="#">SASS</Link>
</div>
<div className="share">
<Link to="#">
<TiSocialFacebook />
</Link>
<Link to="#">
<TiSocialTwitter />
</Link>
<Link to="#">
<TiSocialPinterest />
</Link>
<Link to="#">
<TiSocialLinkedin />
</Link>
<span>:Share</span>
</div>
</div>
<div className="post-comment-wrapper">
<h2 className="block-title">5 Comments</h2>
<ul>
<li>
<div className="post-comment-block">
<div className="author-avatar">
<img
src={AuthorThumb2}
alt="prime comments author"
/>
</div>
<div className="comment-body">
<div className="comment-body-inner">
<h3>
Amrita<span>Aug, 05, 2020</span>
</h3>
<div className="replay">
<Link to="#">
Replay <IoIosArrowRoundForward />
</Link>
</div>
</div>
<div className="comment-content">
<p>
Finalmente vol sol justamente crematorio vil
nos. Bem com sido esse case alem aos.Amor tive
fara de dado esse em.
</p>
</div>
</div>
</div>
<ul>
<li>
<div className="post-comment-block">
<div className="author-avatar">
<img
src={AuthorThumb3}
alt="prime comments author"
/>
</div>
<div className="comment-body">
<div className="comment-body-inner">
<h3>
{" "}
jacqueline <span>Aug, 05, 2020</span>{" "}
</h3>
<div className="replay">
<Link to="#">
Replay <IoIosArrowRoundForward />
</Link>
</div>
</div>
<div className="comment-content">
<p>
Finalmente vol sol justamente crematorio
vil nos. Bem com sido esse case alem
aos.Amor tive fara de dado esse em.
</p>
</div>
</div>
</div>
</li>
<li>
<div className="post-comment-block">
<div className="author-avatar">
<img
src={AuthorThumb4}
alt="prime comments author"
/>
</div>
<div className="comment-body">
<div className="comment-body-inner">
<h3>
{" "}
Jennifer <span>Aug, 05, 2020</span>{" "}
</h3>
<div className="replay">
<Link to="#">
Replay <IoIosArrowRoundForward />
</Link>
</div>
</div>
<div className="comment-content">
<p>
Finalmente vol sol justamente crematorio
vil nos. Bem com sido esse case alem
aos.Amor tive fara de dado esse em.
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<div className="post-comment-block">
<div className="author-avatar">
<img
src={AuthorThumb5}
alt="prime comments author"
/>
</div>
<div className="comment-body">
<div className="comment-body-inner">
<h3>
{" "}
William<span>Aug, 05, 2020</span>{" "}
</h3>
<div className="replay">
<Link to="#">
Replay <IoIosArrowRoundForward />
</Link>
</div>
</div>
<div className="comment-content">
<p>
Finalmente vol sol justamente crematorio vil
nos. Bem com sido esse case alem aos.Amor tive
fara de dado esse em.
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div className="comment-box-wrapper">
<h2 className="block-title">Leave a Comment</h2>
<p>
Sing in to post your comment or singup if you dont have
any account.
</p>
<form>
<div className="form-inline">
<input type="text" placeholder="Name*" />
<input type="email" placeholder="Email*" />
</div>
<div className="form-group">
<input type="text" placeholder="Website(Optional)" />
</div>
<textarea
rows="10"
cols="50"
placeholder="Comment"
></textarea>
<VintageBox
right={true}
vintageTwo={true}
position="relative"
>
<Button>Post Comment</Button>
</VintageBox>
</form>
</div>
</div>
</Col>
</Row>
</Col>
<Col sm={12} lg={4}>
<Sidebar />
</Col>
</Row>
</Container>
</div>
</BlogPageWrapper>
);
}
